<template>
  <div ref="kanbanWindow" class="kanban">
    <div class="kanban_map" id="kanbanMap" tabindex="0"></div>
    <div class="kanban_headerBg">
      <div class="kanbanHeader_userInfoBg">
        <img src="@/assets/v4/headerUser.png" />
        <div class="kanbanHeaderUser_company">{{ company }}</div>
        <div class="kanbanHearder_animLeft"></div>
      </div>
      <div class="kanbanHeader_titleBg">
        <div class="kanbanHeader_title">
          <img src="@/assets/v4/title.png" />
          <div class="kanbanHeader_light"></div>
        </div>
      </div>
      <div class="kanbanHeader_btnGroupBg">
        <div class="kanbanHeader_time">{{ nowTime }}</div>
        <div class="kanbanHeader_btnAreaForXH">
          <img src="@/assets/v4/xh.png" />
        </div>
        <div v-if="isFullFlag" class="kanbanHeader_btnArea" @click="exitFullscreen">
          <img src="@/assets/v4/backBtn.png" />
        </div>
        <div v-else class="kanbanHeader_btnArea" @click="showScreen">
          <img src="@/assets/v4/fullScreenBtn.png" />
        </div>
        <div class="kanbanHeader_btnArea" @click="toHome">
          <img src="@/assets/v4/toHome.png" />
        </div>
        <!-- <div class="kanbanHeader_signal"></div>
        <div class="kanbanHeader_thresholdBtn"></div>
        <div class="kanbanHeader_fullScreenBtn"></div>
        <div class="kanbanHeader_logoutBtn"></div> -->
        <div class="kanbanHearder_animRight"></div>
      </div>
    </div>
    <div id="equipmentListArea" class="kanban_equipmentBg">
      <div class="kanbanEquipment_content">
        <div class="kanban_moduleTitle">
          <div class="kanbanModuleTitle_text">设备列表</div>
          <div
            :class="
              btnFlagEquipmentList
                ? 'kanbanEquipment_switchArea'
                : 'kanbanEquipment_switchArea_right'
            "
            @click="moduleSwitchOperation('equipmentList')"
          >
            <i
              v-if="btnFlagEquipmentList"
              class="el-icon-d-arrow-left color_text_blue"
            ></i>
            <i v-else class="el-icon-d-arrow-right color_text_blue"></i>
          </div>
        </div>
        <div class="kanbanEquipmentContent_bg">
          <div class="kanbanEquipment_statusBg">
            <div class="kanbanEquipment_statusItem">
              <div class="kanbanEquipmentStatusItem_numBg">
                <span class="kanbanEquipmentStatusItem_num color_text_red">{{
                  alertCount
                }}</span>
              </div>
              <div class="kanbanEquipmentStatusItem_textBg">
                <div
                  class="kanbanEquipmentStatusItem_sign color_shadow_red color_bg_red"
                ></div>
                <div class="kanbanEquipmentStatusItem_text">报警</div>
              </div>
            </div>
            <!-- <div class="kanbanEquipment_statusItem">
              <div class="kanbanEquipmentStatusItem_numBg">
                <span class="kanbanEquipmentStatusItem_num color_text_yellow">{{ repairCount }}</span>
              </div>
              <div class="kanbanEquipmentStatusItem_textBg">
                <div class="kanbanEquipmentStatusItem_sign color_shadow_yellow color_bg_yellow"></div>
                <div class="kanbanEquipmentStatusItem_text">维修</div>
              </div>
            </div> -->
            <div class="kanbanEquipment_statusItem">
              <div class="kanbanEquipmentStatusItem_numBg">
                <span class="kanbanEquipmentStatusItem_num color_text_orange">{{
                  debugCount
                }}</span>
              </div>
              <div class="kanbanEquipmentStatusItem_textBg">
                <div
                  class="kanbanEquipmentStatusItem_sign color_shadow_orange color_bg_orange"
                ></div>
                <div class="kanbanEquipmentStatusItem_text">调试</div>
              </div>
            </div>
            <div class="kanbanEquipment_statusItem">
              <div class="kanbanEquipmentStatusItem_numBg">
                <span class="kanbanEquipmentStatusItem_num color_text_blue">{{
                  workCount
                }}</span>
              </div>
              <div class="kanbanEquipmentStatusItem_textBg">
                <div
                  class="kanbanEquipmentStatusItem_sign color_shadow_blue color_bg_blue"
                ></div>
                <div class="kanbanEquipmentStatusItem_text">在线</div>
              </div>
            </div>
          </div>
          <div class="kanbanEquipment_listBg">
            <metaEquipmentList
              ref="equipFixed"
              :datas="equipmentList"
              :etype="equipmentSelectType"
              @onVsChange="changeVsEquipment"
              @onChoose="onEquipmentChoose"
              @changeEqType="changeEqType"
              @areaLocation="areaLocation"
            ></metaEquipmentList>
          </div>
        </div>
      </div>
      <div v-if="currentEquipmentId !== ''" class="kanbanEquipment_btnArea">
        <div class="kanbanEquipment_btnItem" @click="moduleSwitchOperation('waterLevel')">
          <img
            v-if="btnFlagWaterLevel"
            class="kanbanEquipment_btn"
            src="@/assets/v4/showBtn_waterLevel_o.png"
          />
          <img
            v-else
            class="kanbanEquipment_btn"
            src="@/assets/v4/showBtn_waterLevel.png"
          />
        </div>
        <div
          v-if="currentEquipmentType != '20'"
          class="kanbanEquipment_btnItem"
          @click="moduleSwitchOperation('paramPk')"
        >
          <img
            v-if="btnFlagParamPk"
            class="kanbanEquipment_btn"
            src="@/assets/v4/showBtn_vs_o.png"
          />
          <img v-else class="kanbanEquipment_btn" src="@/assets/v4/showBtn_vs.png" />
        </div>
        <div class="kanbanEquipment_btnItem" @click="moduleSwitchOperation('params')">
          <img
            v-if="btnFlagActualDatas"
            class="kanbanEquipment_btn"
            src="@/assets/v4/showBtn_datas_o.png"
          />
          <img v-else class="kanbanEquipment_btn" src="@/assets/v4/showBtn_datas.png" />
        </div>
        <!-- <div class="kanbanEquipment_btnItem" @click="moduleSwitchOperation('chart')">
          <img v-if="btnFlagSpectralCurve" class="kanbanEquipment_btn" src="@/assets/v4/showBtn_chart_o.png">
          <img v-else class="kanbanEquipment_btn" src="@/assets/v4/showBtn_chart.png">
        </div> -->
      </div>
    </div>
    <div v-if="currentEquipmentId === ''" class="kanban_equipmentActual">
      <div class="kanbanParamActualTime_content">
        <div class="kanban_moduleTitle">
          <div class="kanbanModuleTitle_text">水质排行</div>
        </div>
        <div class="kanbanParamActualTime_bg">
          <!-- <div class="kanbanParamActualTime_list">
            <div class="kanbanParamActualTimeList_titleArea">
              <div class="kanbanParamActualTimeListTitle_index"></div>
              <div class="kanbanParamActualTimeListTitle_item">设备名称</div>
              <div class="kanbanParamActualTimeListTitle_item">异常类型</div>
              <div class="kanbanParamActualTimeListTitle_item">异常时间</div>
            </div>
            <div class="kanbanEquipmentAlarmList_contentArea">
              <div class="kanbanParamActualTimeList_contentBg">
                <div v-if="alarmEquipmentList.length <= 0" class="emptyStatus">设备稳定运行中，暂无报警数据</div>
                <div class="kanbanEquipmentAlarmList_item" v-for="(item,index) in alarmEquipmentList" :key="index">
                  <div class="kanbanEquipmentAlarmList_index">{{ index + 1 }}</div>
                  <div class="kanbanEquipmentAlarmList_equipment">
                    <div v-if="item.maxWarningLevel == '01'" class="kanbanEquipmentAlarmList_equipmentText color_bg_red">{{ item.customizeName && item.customizeName !== '' ? item.customizeName : item.pointName }}</div>
                    <div v-else-if="item.maxWarningLevel == '02'" class="kanbanEquipmentAlarmList_equipmentText color_bg_orange">{{ item.customizeName && item.customizeName !== '' ? item.customizeName : item.pointName }}</div>
                    <div v-else-if="item.maxWarningLevel == '03'" class="kanbanEquipmentAlarmList_equipmentText color_bg_yellow">{{ item.customizeName && item.customizeName !== '' ? item.customizeName : item.pointName }}</div>
                    <div v-else class="kanbanEquipmentAlarmList_equipmentText color_bg_blue" style="color: black">{{ item.customizeName && item.customizeName !== '' ? item.customizeName : item.pointName }}</div>
                  </div>
                  <div v-if="item.maxWarning == '0101'" class="kanbanEquipmentAlarmList_type">定位异常</div>
                  <div v-else-if="item.maxWarning == '0102'" class="kanbanEquipmentAlarmList_type">连接异常</div>
                  <div v-else-if="item.maxWarning == '0103'" class="kanbanEquipmentAlarmList_type">通讯异常</div>
                  <div v-else-if="item.maxWarning == '0104'" class="kanbanEquipmentAlarmList_type">设备离水异常</div>
                  <div v-else-if="item.maxWarning == '0201'" class="kanbanEquipmentAlarmList_type">电量异常</div>

                  <div class="kanbanEquipmentAlarmList_time">{{ item.maxWarningTime }}</div>
                </div>
                <div v-if="alarmEquipmentList.length < wholeAlarmEquipmentList.length" class="kanbanEquipmentAlarmList_more" @click="showMoreAlarm()">
                  <span class="kanbanEquipmentAlarmList_moreText">查看更多</span>
                  <i class="el-icon-arrow-down"></i>
                </div>
              </div>
            </div>
          </div> -->
          <div class="kanbanParamActualTime_list">
            <div class="kanbanParamActualTimeList_titleArea">
              <div class="kanbanParamActualTimeListTitle_wqTopTen">
                TOP
                <img
                  v-if="waterLevelEquipmentList.length > 0 && wlOrderByFlag == 'up'"
                  src="@/assets/kanban/topDown.png"
                  class="kanbanParamActualTimeListTitle_orderBy"
                  @click="waterLevelOrderBy"
                />
                <img
                  v-else-if="
                    waterLevelEquipmentList.length > 0 && wlOrderByFlag == 'down'
                  "
                  src="@/assets/kanban/topUp.png"
                  class="kanbanParamActualTimeListTitle_orderBy"
                  @click="waterLevelOrderBy"
                />
              </div>
              <div class="kanbanParamActualTimeListTitle_wqTopItem">设备名称</div>
              <div class="kanbanParamActualTimeListTitle_wqTopTen">水质等级</div>
            </div>
            <div class="kanbanEquipmentAlarmList_contentArea">
              <div class="kanbanParamActualTimeList_contentBg">
                <div v-if="waterLevelEquipmentList.length <= 0" class="emptyStatus">
                  暂无数据
                </div>
                <div
                  class="kanbanEquipmentAlarmList_topBg"
                  v-for="(item, index) in waterLevelEquipmentList"
                  :key="index"
                >
                  <div v-if="wlOrderByFlag == 'up'" class="kanbanEquipmentAlarmList_top">
                    <div
                      v-if="index < 9"
                      class="kanbanEquipmentAlarmList_topSign"
                      :style="
                        index < 3
                          ? 'color: white;background: #1a8ef1'
                          : 'color: black;background: #e3ecf5'
                      "
                    >
                      {{ "0" + (index + 1) }}
                      <img
                        v-if="index == 0"
                        src="@/assets/v4/level01.png"
                        class="kanbanEquipmentAlarmList_topThree"
                      />
                      <img
                        v-else-if="index == 1"
                        src="@/assets/v4/level02.png"
                        class="kanbanEquipmentAlarmList_topThree"
                      />
                      <img
                        v-else-if="index == 2"
                        src="@/assets/v4/level03.png"
                        class="kanbanEquipmentAlarmList_topThree"
                      />
                    </div>
                    <div
                      v-else
                      class="kanbanEquipmentAlarmList_topSign"
                      style="color: black; background: #e3ecf5"
                    >
                      {{ index + 1 }}
                    </div>
                  </div>
                  <div v-else class="kanbanEquipmentAlarmList_top">
                    <div
                      v-if="waterLevelEquipmentList.length - index < 10"
                      class="kanbanEquipmentAlarmList_topSign"
                      :style="
                        waterLevelEquipmentList.length - index <= 3
                          ? 'color: white;background: #1a8ef1'
                          : 'color: black;background: #e3ecf5'
                      "
                    >
                      {{ "0" + (waterLevelEquipmentList.length - index) }}
                      <img
                        v-if="waterLevelEquipmentList.length - index == 1"
                        src="@/assets/v4/level01.png"
                        class="kanbanEquipmentAlarmList_topThree"
                      />
                      <img
                        v-else-if="waterLevelEquipmentList.length - index == 2"
                        src="@/assets/v4/level02.png"
                        class="kanbanEquipmentAlarmList_topThree"
                      />
                      <img
                        v-else-if="waterLevelEquipmentList.length - index == 3"
                        src="@/assets/v4/level03.png"
                        class="kanbanEquipmentAlarmList_topThree"
                      />
                    </div>
                    <div
                      v-else
                      class="kanbanEquipmentAlarmList_topSign"
                      style="color: black; background: #e3ecf5"
                    >
                      {{ waterLevelEquipmentList.length - index }}
                    </div>
                  </div>
                  <div class="kanbanEquipmentAlarmList_topEquipment">
                    <div
                      class="kanbanEquipmentAlarmList_topEquipmentBg"
                      @click="
                        chooseEquipmentFromTop(item.pointId, item.equipmentType + '0')
                      "
                    >
                      <img
                        v-if="item.equipmentType == '1'"
                        src="@/assets/kanban/equLogo_fbs.png"
                        class="kanbanEquipmentAlarmList_equipmentType"
                      />
                      <img
                        v-else-if="item.equipmentType == '3'"
                        src="@/assets/kanban/equLogo_ajs.png"
                        class="kanbanEquipmentAlarmList_equipmentType"
                      />
                      <img
                        v-else-if="item.equipmentType == '4'"
                        src="@/assets/kanban/equLogo_gds.png"
                        class="kanbanEquipmentAlarmList_equipmentType"
                      />
                      <div class="kanbanEquipmentAlarmList_topEquipmentText">
                        {{
                          item.customizeName && item.customizeName !== ""
                            ? item.customizeName
                            : item.pointName
                        }}
                      </div>
                    </div>
                  </div>
                  <div class="kanbanEquipmentAlarmList_topWaterLevelBg">
                    <div
                      v-if="item.waterlevel == 1"
                      class="kanbanEquipmentAlarmList_topWaterLevel"
                      style="background: #02a447"
                    >
                      Ⅰ类
                    </div>
                    <div
                      v-else-if="item.waterlevel == 2"
                      class="kanbanEquipmentAlarmList_topWaterLevel"
                      style="background: #02a447"
                    >
                      Ⅱ类
                    </div>
                    <div
                      v-else-if="item.waterlevel == 3"
                      class="kanbanEquipmentAlarmList_topWaterLevel"
                      style="background: #02a447"
                    >
                      Ⅲ类
                    </div>
                    <div
                      v-else-if="item.waterlevel == 4"
                      class="kanbanEquipmentAlarmList_topWaterLevel"
                      style="background: #fcdb00"
                    >
                      Ⅳ类
                    </div>
                    <div
                      v-else-if="item.waterlevel == 5"
                      class="kanbanEquipmentAlarmList_topWaterLevel"
                      style="background: #ff8f17"
                    >
                      Ⅴ类
                    </div>
                    <div
                      v-else
                      class="kanbanEquipmentAlarmList_topWaterLevel"
                      style="background: #fa2f2d"
                    >
                      劣Ⅴ类
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="currentEquipmentId !== '' && btnFlagActualDatas"
      :class="
        currentEquipmentType !== '20'
          ? 'kanban_paramActualTime'
          : 'kanban_equipmentActual'
      "
    >
      <div class="kanbanParamActualTime_content">
        <div class="kanban_moduleTitle">
          <div class="kanbanModuleTitle_text">实时数据</div>
        </div>
        <div class="kanbanParamActualTime_bg">
          <div v-if="currentEquipmentType != '20'" class="kanbanParamActualTime_list">
            <div class="kanbanParamActualTimeList_titleArea">
              <div class="kanbanParamActualTimeListTitle_index"></div>
              <div class="kanbanParamActualTimeListTitle_item">指标名称</div>
              <div class="kanbanParamActualTimeListTitle_item">检测值</div>
              <div class="kanbanParamActualTimeListTitle_item">参考值</div>
            </div>
            <div class="kanbanParamActualTimeList_contentArea">
              <div
                v-if="
                  collectionDatas[currentEquipmentId] &&
                  collectionDatas[currentEquipmentId].datas.length > 0
                "
                class="kanbanParamActualTimeList_contentBg"
              >
                <div
                  class="kanbanEquipmentAlarmList_item"
                  v-for="item in collectionDatas[currentEquipmentId].datas[0].params"
                  :key="item.paramKey"
                >
                  <div class="kanbanParamActualTimeListItem_status">
                    <div
                      v-if="item.value > item.up || item.value < item.down"
                      class="kanbanParamActualTimeListItem_sign color_bg_red"
                    ></div>
                    <div
                      v-else
                      class="kanbanParamActualTimeListItem_sign color_bg_blue"
                    ></div>
                  </div>
                  <div
                    :class="
                      item.paramType == '1'
                        ? 'kanbanParamActualTimeListItem_paramNameOthers'
                        : 'kanbanParamActualTimeListItem_paramName'
                    "
                  >
                    {{ item.paramName }}
                  </div>
                  <div class="kanbanParamActualTimeListItem_paramValue">
                    {{ item.value.toFixed(item.reserved) }}
                  </div>
                  <div class="kanbanParamActualTimeListItem_threshold">
                    {{ item.down }} - {{ item.up }} {{ item.unit }}
                    <img
                      v-if="item.value > item.up"
                      class="kanbanParamActualTimeListItem_thresholdAlarm"
                      src="@/assets/v4/thresholdUp.png"
                    />
                    <img
                      v-if="item.value < item.down"
                      class="kanbanParamActualTimeListItem_thresholdAlarm"
                      src="@/assets/v4/thresholdDown.png"
                    />
                  </div>
                </div>
              </div>
              <div v-else class="emptyStatus">当前暂无数据</div>
            </div>
            <div
              v-if="currentEquipmentType != '20'"
              class="kanbanParamActualTime_history"
              @click="showHistoryDataDialog"
            >
              <span class="kanbanParamActualTime_historyText">查看历史数据</span>
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
          <div v-else class="kanbanParamActualTime_list">
            <div class="kanbanParamActualTimeList_titleArea">
              <div class="kanbanParamActualTimeListTitle_index"></div>
              <div class="kanbanParamActualTimeListTitle_item">指标</div>
              <div class="kanbanParamActualTimeListTitle_item">最新数据</div>
              <div class="kanbanParamActualTimeListTitle_item">参考值</div>
            </div>
            <div class="kanbanParamActualTimeList_contentArea" style="padding-bottom: 0">
              <div
                v-if="selectPointDatas.length > 0"
                class="kanbanParamActualTimeList_contentBg"
              >
                <div
                  class="kanbanEquipmentAlarmList_item"
                  v-for="item in selectPointDatas"
                  :key="item.id"
                >
                  <div class="kanbanParamActualTimeListItem_status">
                    <div
                      v-if="
                        parseFloat(item.value) > item.up ||
                        parseFloat(item.value) < item.down
                      "
                      class="kanbanParamActualTimeListItem_sign color_bg_red"
                    ></div>
                    <div
                      v-else
                      class="kanbanParamActualTimeListItem_sign color_bg_blue"
                    ></div>
                  </div>
                  <div class="kanbanParamActualTimeListItem_paramName">
                    {{ item.name }}
                  </div>
                  <div class="kanbanParamActualTimeListItem_paramValue">
                    {{ item.value }}
                  </div>
                  <div class="kanbanParamActualTimeListItem_threshold">
                    {{ item.down }} - {{ item.up }} {{ item.unit }}
                    <img
                      v-if="parseFloat(item.value) > item.up"
                      class="kanbanParamActualTimeListItem_thresholdAlarm"
                      src="@/assets/v4/thresholdUp.png"
                    />
                    <img
                      v-if="parseFloat(item.value) < item.down"
                      class="kanbanParamActualTimeListItem_thresholdAlarm"
                      src="@/assets/v4/thresholdDown.png"
                    />
                  </div>
                </div>
              </div>
              <div v-else class="emptyStatus">当前暂无数据</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="currentEquipmentId === ''" class="kanban_spectralCurve">
      <div class="kanbanSpectralCurve_content">
        <div class="kanban_moduleTitle">
          <div class="kanbanModuleTitle_text">设备分布</div>
        </div>
        <div class="kanbanSpectralCurve_bg">
          <div class="kanbanSpectralCurve_chartBg">
            <div id="equipmentDistributionChart" class="kanbanSpectralCurve_chart"></div>
          </div>
        </div>
      </div>
    </div>
    <div
      v-if="currentEquipmentId !== '' && currentEquipmentType == '20'"
      class="kanban_spectralCurve"
    >
      <div class="kanbanSpectralCurve_content">
        <div class="kanban_moduleTitle">
          <div class="kanbanModuleTitle_text">水质光谱</div>
        </div>
        <div class="kanbanSpectralCurve_bg">
          <div class="kanbanSpectralCurve_chartBg">
            <div id="waterSpectrumChart" class="kanbanSpectralCurve_chart"></div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="currentEquipmentId !== '' && btnFlagWaterLevel" class="kanban_waterLevel">
      <div class="kanbanWaterLevel_bg">
        <div class="kanban_moduleTitle" style="width: 53.3%">
          <div class="kanbanModuleTitle_text">水质等级</div>
        </div>
        <div class="kanbanContentWaterLevel_picBg">
          <div class="kanbanContentWaterLevel_pic"></div>
          <img
            class="kanbanContentWaterLevel_sign"
            src="@/assets/v4/waterLevel_sign.png"
            :style="getLeftDistance('level')"
          />
        </div>
        <div class="kanbanContentWaterLevel_textBg">
          <div class="kanbanConentWaterLevel_textItemLeft">Ⅰ类</div>
          <div class="kanbanConentWaterLevel_textItemCenter">Ⅱ类</div>
          <div class="kanbanConentWaterLevel_textItemCenter">Ⅲ类</div>
          <div class="kanbanConentWaterLevel_textItemCenter">Ⅳ类</div>
          <div class="kanbanConentWaterLevel_textItemCenter">Ⅴ类</div>
          <div class="kanbanConentWaterLevel_textItemRight">劣Ⅴ类</div>
        </div>
      </div>
      <!-- <div v-if="currentEquipmentType != '20'" class="kanbanWaterLevel_textBg">
        <div class="kanbanWaterLevelText_item">
          <div class="kanbanWaterLevelTextItem_numArea">
            <div class="kanbanWaterLevelTextItem_numBg">
              <div class="kanbanWaterLevelTextItem_num">{{ equTimeSum }}</div>
              <div class="kanbanWaterLevelTextItem_unit">小时</div>
            </div>
          </div>
          <div class="kanbanWaterLevelTextItem_title">采集时间</div>
        </div>
        <div class="kanbanWaterLevelText_cut"></div>
        <div class="kanbanWaterLevelText_item">
          <div class="kanbanWaterLevelTextItem_numArea">
            <div class="kanbanWaterLevelTextItem_numBg">
              <div class="kanbanWaterLevelTextItem_num">{{ equCollectionSum }}</div>
              <div class="kanbanWaterLevelTextItem_unit">条</div>
            </div>
          </div>
          <div class="kanbanWaterLevelTextItem_title">累计采集</div>
        </div>
      </div> -->
      <div v-if="currentEquipmentType != '20'" class="kanbanWaterLevel_hint">
        <span id="levelDesSpan">{{ levelDescription }}</span>
      </div>
    </div>
    <div
      v-if="
        currentEquipmentId !== '' && collectionDatas[currentEquipmentId] && btnFlagParamPk
      "
      class="kanban_vs"
    >
      <div class="kanbanVs_content">
        <div class="kanban_moduleTitle" style="width: 30%">
          <div class="kanbanModuleTitle_text">指标比对</div>
        </div>
        <div class="kanbanVs_area">
          <div class="kanbanVs_areaBg">
            <div class="kanbanVs_paramChoiseArea">
              <div class="kanbanVsParamChoise_arrow">
                <div class="kanbanVsParamChoise_arrowLeft" @click="paramScroll('left')">
                  <i class="kanbanVsParamChoise_arrowIcon el-icon-arrow-left"></i>
                </div>
              </div>
              <div id="kanbanVsParamScroll" class="kanbanVsParamChoise_bg">
                <div class="kanbanVsParamChoise_paramArea">
                  <div
                    :class="
                      vsParamKeyIndex == index
                        ? 'kanbanVsParamChoise_parmamItem_o'
                        : 'kanbanVsParamChoise_parmamItem'
                    "
                    :style="item.paramType == '1' ? 'color: #f5f5cb;' : 'color: #CCF2FF;'"
                    v-for="(item, index) in userParamList"
                    :key="item.paramKey"
                    @click="vsChooseParam(index)"
                  >
                    {{ item.paramName }}
                  </div>
                </div>
              </div>
              <div class="kanbanVsParamChoise_arrow">
                <div class="kanbanVsParamChoise_arrowRight" @click="paramScroll('right')">
                  <i class="kanbanVsParamChoise_arrowIcon el-icon-arrow-right"></i>
                </div>
              </div>
            </div>
            <div class="kanbanVs_paramDataArea">
              <div class="kanbanVsParamData_datasBg">
                <div class="kanbanVsParamData_benchmarkItemBg">
                  <div class="kanbanVsParamData_benchmarkTitle">
                    <div class="kanbanVsParamDataBenchmark_titleSign"></div>
                    <div class="kanbanVsParamDataBenchmark_titleEquipment">
                      {{
                        collectionDatas[currentEquipmentId].customizeName &&
                        collectionDatas[currentEquipmentId].customizeName !== ""
                          ? collectionDatas[currentEquipmentId].customizeName
                          : collectionDatas[currentEquipmentId].pointName
                      }}
                    </div>
                    <div class="kanbanVsParamDataBenchmark_titleSignText">当前</div>
                  </div>
                  <div class="kanbanVsParamData_benchmarkItem">
                    <div
                      class="kanbanVsParamDataListItem_bg"
                      v-for="index in collectionDatas[currentEquipmentId].datas.length > 6
                        ? 6
                        : collectionDatas[currentEquipmentId].datas.length"
                      :key="collectionDatas[currentEquipmentId].datas[index - 1].id"
                    >
                      <div class="kanbanVsParamDataListItem_value">
                        {{
                          collectionDatas[currentEquipmentId].datas[index - 1].params[
                            vsParamKeyIndex
                          ].value.toFixed(
                            collectionDatas[currentEquipmentId].datas[index - 1].params[
                              vsParamKeyIndex
                            ].reserved
                          )
                        }}
                      </div>
                      <div class="kanbanVsParamDataListItem_time">
                        {{ collectionDatas[currentEquipmentId].datas[index - 1].time }}
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  v-if="vsDataList.length > 0"
                  class="kanbanVsParamData_vsArea"
                  :style="vsDataList.length <= 1 ? 'flex:1' : 'flex:2'"
                >
                  <div
                    :ref="'vs_' + vsIndex"
                    class="kanbanVsParamData_vsItemBg"
                    :style="
                      'transform:translateX(' +
                      vsIndex * 100 +
                      '%);' +
                      (vsDataList.length > 1 ? 'width: 50%' : 'width: 100%')
                    "
                    v-for="(vsItem, vsIndex) in vsDataList"
                    :key="vsItem.equipmentId"
                  >
                    <div class="kanbanVsParamData_vsTitle">
                      <div
                        class="kanbanVsParamDataVs_titleSign"
                        :style="'background:' + colorJson[vsIndex % 12].color"
                      ></div>
                      <div class="kanbanVsParamDataVs_titleEquipment">
                        {{
                          vsItem.customizeName && vsItem.customizeName !== ""
                            ? vsItem.customizeName
                            : vsItem.pointName
                        }}
                      </div>
                      <div class="kanbanVsParamDataVs_titleSignText">VS</div>
                    </div>
                    <div class="kanbanVsParamData_vsItem">
                      <div
                        class="kanbanVsParamDataListItem_bg"
                        v-for="index in vsItem.datas.length > 6 ? 6 : vsItem.datas.length"
                        :key="vsItem.datas[index - 1].id"
                      >
                        <div
                          v-if="
                            collectionDatas[currentEquipmentId].datas[index - 1] &&
                            Math.round(
                              vsItem.datas[index - 1].params[vsParamKeyIndex].value *
                                Math.pow(
                                  10,
                                  vsItem.datas[index - 1].params[vsParamKeyIndex].reserved
                                )
                            ) /
                              Math.pow(
                                10,
                                vsItem.datas[index - 1].params[vsParamKeyIndex].reserved
                              ) >
                              Math.round(
                                collectionDatas[currentEquipmentId].datas[index - 1]
                                  .params[vsParamKeyIndex].value *
                                  Math.pow(
                                    10,
                                    collectionDatas[currentEquipmentId].datas[index - 1]
                                      .params[vsParamKeyIndex].reserved
                                  )
                              ) /
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].datas[index - 1]
                                    .params[vsParamKeyIndex].reserved
                                )
                          "
                          class="kanbanVsParamDataListItem_value color_vsText_red"
                        >
                          {{
                            vsItem.datas[index - 1].params[vsParamKeyIndex].value.toFixed(
                              vsItem.datas[index - 1].params[vsParamKeyIndex].reserved
                            )
                          }}
                        </div>
                        <div
                          v-else-if="
                            collectionDatas[currentEquipmentId].datas[index - 1] &&
                            Math.round(
                              vsItem.datas[index - 1].params[vsParamKeyIndex].value *
                                Math.pow(
                                  10,
                                  vsItem.datas[index - 1].params[vsParamKeyIndex].reserved
                                )
                            ) /
                              Math.pow(
                                10,
                                vsItem.datas[index - 1].params[vsParamKeyIndex].reserved
                              ) <
                              Math.round(
                                collectionDatas[currentEquipmentId].datas[index - 1]
                                  .params[vsParamKeyIndex].value *
                                  Math.pow(
                                    10,
                                    collectionDatas[currentEquipmentId].datas[index - 1]
                                      .params[vsParamKeyIndex].reserved
                                  )
                              ) /
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].datas[index - 1]
                                    .params[vsParamKeyIndex].reserved
                                )
                          "
                          class="kanbanVsParamDataListItem_value color_vsText_orange"
                        >
                          {{
                            vsItem.datas[index - 1].params[vsParamKeyIndex].value.toFixed(
                              vsItem.datas[index - 1].params[vsParamKeyIndex].reserved
                            )
                          }}
                        </div>
                        <div v-else class="kanbanVsParamDataListItem_value">
                          {{
                            vsItem.datas[index - 1].params[vsParamKeyIndex].value.toFixed(
                              vsItem.datas[index - 1].params[vsParamKeyIndex].reserved
                            )
                          }}
                        </div>
                        <img
                          v-if="
                            collectionDatas[currentEquipmentId].datas[index - 1] &&
                            Math.round(
                              vsItem.datas[index - 1].params[vsParamKeyIndex].value *
                                Math.pow(
                                  10,
                                  vsItem.datas[index - 1].params[vsParamKeyIndex].reserved
                                )
                            ) /
                              Math.pow(
                                10,
                                vsItem.datas[index - 1].params[vsParamKeyIndex].reserved
                              ) >
                              Math.round(
                                collectionDatas[currentEquipmentId].datas[index - 1]
                                  .params[vsParamKeyIndex].value *
                                  Math.pow(
                                    10,
                                    collectionDatas[currentEquipmentId].datas[index - 1]
                                      .params[vsParamKeyIndex].reserved
                                  )
                              ) /
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].datas[index - 1]
                                    .params[vsParamKeyIndex].reserved
                                )
                          "
                          class="kanbanVsParamDataListItem_vsImg"
                          src="@/assets/v4/vsUp.png"
                        />
                        <img
                          v-else-if="
                            collectionDatas[currentEquipmentId].datas[index - 1] &&
                            Math.round(
                              vsItem.datas[index - 1].params[vsParamKeyIndex].value *
                                Math.pow(
                                  10,
                                  vsItem.datas[index - 1].params[vsParamKeyIndex].reserved
                                )
                            ) /
                              Math.pow(
                                10,
                                vsItem.datas[index - 1].params[vsParamKeyIndex].reserved
                              ) <
                              Math.round(
                                collectionDatas[currentEquipmentId].datas[index - 1]
                                  .params[vsParamKeyIndex].value *
                                  Math.pow(
                                    10,
                                    collectionDatas[currentEquipmentId].datas[index - 1]
                                      .params[vsParamKeyIndex].reserved
                                  )
                              ) /
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].datas[index - 1]
                                    .params[vsParamKeyIndex].reserved
                                )
                          "
                          class="kanbanVsParamDataListItem_vsImg"
                          src="@/assets/v4/vsDown.png"
                        />
                        <div class="kanbanVsParamDataListItem_time">
                          {{ vsItem.datas[index - 1].time }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    v-if="vsDataList.length > 2 && vsDataPageIndex > 0"
                    class="kanbanVsParamData_arrow kanbanVsParamDataArrowLeft"
                    @click="dataVsPageChange('left')"
                  >
                    <i class="el-icon-arrow-left"></i>
                  </div>
                  <div
                    v-if="
                      vsDataList.length > 2 && vsDataPageIndex < vsDataList.length - 2
                    "
                    class="kanbanVsParamData_arrow kanbanVsParamDataArrowRight"
                    @click="dataVsPageChange('right')"
                  >
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
                <template v-else>
                  <div
                    class="kanbanVsParamData_benchmarkItemBg"
                    style="padding-left: 5px"
                  >
                    <div class="kanbanVsParamData_benchmarkTitle">
                      <div
                        class="kanbanVsParamDataBenchmark_titleSign"
                        :style="'background:' + colorJson[0].color"
                      ></div>
                      <div class="kanbanVsParamDataBenchmark_titleEquipment">前一日</div>
                      <div class="kanbanVsParamDataBenchmark_titleSignText">VS</div>
                    </div>
                    <div class="kanbanVsParamData_benchmarkItem">
                      <div
                        class="kanbanVsParamDataListItem_bg"
                        v-for="index in collectionDatas[currentEquipmentId].agoData
                          .length > 6
                          ? 6
                          : collectionDatas[currentEquipmentId].agoData.length"
                        :key="collectionDatas[currentEquipmentId].agoData[index - 1].id"
                      >
                        <!-- <div class="kanbanVsParamDataListItem_value">{{collectionDatas[currentEquipmentId].agoData[index - 1].params[vsParamKeyIndex].value.toFixed(collectionDatas[currentEquipmentId].agoData[index - 1].params[vsParamKeyIndex].reserved)}}</div> -->
                        <div
                          v-if="
                            collectionDatas[currentEquipmentId].datas[index - 1] &&
                            Math.round(
                              collectionDatas[currentEquipmentId].agoData[index - 1]
                                .params[vsParamKeyIndex].value *
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].agoData[index - 1]
                                    .params[vsParamKeyIndex].reserved
                                )
                            ) /
                              Math.pow(
                                10,
                                collectionDatas[currentEquipmentId].agoData[index - 1]
                                  .params[vsParamKeyIndex].reserved
                              ) >
                              Math.round(
                                collectionDatas[currentEquipmentId].datas[index - 1]
                                  .params[vsParamKeyIndex].value *
                                  Math.pow(
                                    10,
                                    collectionDatas[currentEquipmentId].datas[index - 1]
                                      .params[vsParamKeyIndex].reserved
                                  )
                              ) /
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].datas[index - 1]
                                    .params[vsParamKeyIndex].reserved
                                )
                          "
                          class="kanbanVsParamDataListItem_value color_vsText_red"
                        >
                          {{
                            collectionDatas[currentEquipmentId].agoData[index - 1].params[
                              vsParamKeyIndex
                            ].value.toFixed(
                              collectionDatas[currentEquipmentId].agoData[index - 1]
                                .params[vsParamKeyIndex].reserved
                            )
                          }}
                        </div>
                        <div
                          v-else-if="
                            collectionDatas[currentEquipmentId].datas[index - 1] &&
                            Math.round(
                              collectionDatas[currentEquipmentId].agoData[index - 1]
                                .params[vsParamKeyIndex].value *
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].agoData[index - 1]
                                    .params[vsParamKeyIndex].reserved
                                )
                            ) /
                              Math.pow(
                                10,
                                collectionDatas[currentEquipmentId].agoData[index - 1]
                                  .params[vsParamKeyIndex].reserved
                              ) <
                              Math.round(
                                collectionDatas[currentEquipmentId].datas[index - 1]
                                  .params[vsParamKeyIndex].value *
                                  Math.pow(
                                    10,
                                    collectionDatas[currentEquipmentId].datas[index - 1]
                                      .params[vsParamKeyIndex].reserved
                                  )
                              ) /
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].datas[index - 1]
                                    .params[vsParamKeyIndex].reserved
                                )
                          "
                          class="kanbanVsParamDataListItem_value color_vsText_orange"
                        >
                          {{
                            collectionDatas[currentEquipmentId].agoData[index - 1].params[
                              vsParamKeyIndex
                            ].value.toFixed(
                              collectionDatas[currentEquipmentId].agoData[index - 1]
                                .params[vsParamKeyIndex].reserved
                            )
                          }}
                        </div>
                        <div v-else class="kanbanVsParamDataListItem_value">
                          {{
                            collectionDatas[currentEquipmentId].agoData[index - 1].params[
                              vsParamKeyIndex
                            ].value.toFixed(
                              collectionDatas[currentEquipmentId].agoData[index - 1]
                                .params[vsParamKeyIndex].reserved
                            )
                          }}
                        </div>
                        <img
                          v-if="
                            collectionDatas[currentEquipmentId].datas[index - 1] &&
                            Math.round(
                              collectionDatas[currentEquipmentId].agoData[index - 1]
                                .params[vsParamKeyIndex].value *
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].agoData[index - 1]
                                    .params[vsParamKeyIndex].reserved
                                )
                            ) /
                              Math.pow(
                                10,
                                collectionDatas[currentEquipmentId].agoData[index - 1]
                                  .params[vsParamKeyIndex].reserved
                              ) >
                              Math.round(
                                collectionDatas[currentEquipmentId].datas[index - 1]
                                  .params[vsParamKeyIndex].value *
                                  Math.pow(
                                    10,
                                    collectionDatas[currentEquipmentId].datas[index - 1]
                                      .params[vsParamKeyIndex].reserved
                                  )
                              ) /
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].datas[index - 1]
                                    .params[vsParamKeyIndex].reserved
                                )
                          "
                          class="kanbanVsParamDataListItem_vsImg"
                          src="@/assets/v4/vsUp.png"
                        />
                        <img
                          v-else-if="
                            collectionDatas[currentEquipmentId].datas[index - 1] &&
                            Math.round(
                              collectionDatas[currentEquipmentId].agoData[index - 1]
                                .params[vsParamKeyIndex].value *
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].agoData[index - 1]
                                    .params[vsParamKeyIndex].reserved
                                )
                            ) /
                              Math.pow(
                                10,
                                collectionDatas[currentEquipmentId].agoData[index - 1]
                                  .params[vsParamKeyIndex].reserved
                              ) <
                              Math.round(
                                collectionDatas[currentEquipmentId].datas[index - 1]
                                  .params[vsParamKeyIndex].value *
                                  Math.pow(
                                    10,
                                    collectionDatas[currentEquipmentId].datas[index - 1]
                                      .params[vsParamKeyIndex].reserved
                                  )
                              ) /
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].datas[index - 1]
                                    .params[vsParamKeyIndex].reserved
                                )
                          "
                          class="kanbanVsParamDataListItem_vsImg"
                          src="@/assets/v4/vsDown.png"
                        />

                        <div class="kanbanVsParamDataListItem_time">
                          {{
                            collectionDatas[currentEquipmentId].agoData[index - 1].time
                          }}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="kanbanVsParamData_benchmarkItemBg"
                    style="padding-left: 5px"
                  >
                    <div class="kanbanVsParamData_benchmarkTitle">
                      <div
                        class="kanbanVsParamDataBenchmark_titleSign"
                        :style="'background:' + colorJson[1].color"
                      ></div>
                      <div class="kanbanVsParamDataBenchmark_titleEquipment">前两日</div>
                      <div class="kanbanVsParamDataBenchmark_titleSignText">VS</div>
                    </div>
                    <div class="kanbanVsParamData_benchmarkItem">
                      <div
                        class="kanbanVsParamDataListItem_bg"
                        v-for="index in collectionDatas[currentEquipmentId].twoAgoData
                          .length > 6
                          ? 6
                          : collectionDatas[currentEquipmentId].twoAgoData.length"
                        :key="
                          collectionDatas[currentEquipmentId].twoAgoData[index - 1].id
                        "
                      >
                        <!-- <div class="kanbanVsParamDataListItem_value">{{collectionDatas[currentEquipmentId].twoAgoData[index - 1].params[vsParamKeyIndex].value.toFixed(collectionDatas[currentEquipmentId].twoAgoData[index - 1].params[vsParamKeyIndex].reserved)}}</div> -->
                        <div
                          v-if="
                            collectionDatas[currentEquipmentId].datas[index - 1] &&
                            Math.round(
                              collectionDatas[currentEquipmentId].twoAgoData[index - 1]
                                .params[vsParamKeyIndex].value *
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].twoAgoData[
                                    index - 1
                                  ].params[vsParamKeyIndex].reserved
                                )
                            ) /
                              Math.pow(
                                10,
                                collectionDatas[currentEquipmentId].twoAgoData[index - 1]
                                  .params[vsParamKeyIndex].reserved
                              ) >
                              Math.round(
                                collectionDatas[currentEquipmentId].datas[index - 1]
                                  .params[vsParamKeyIndex].value *
                                  Math.pow(
                                    10,
                                    collectionDatas[currentEquipmentId].datas[index - 1]
                                      .params[vsParamKeyIndex].reserved
                                  )
                              ) /
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].datas[index - 1]
                                    .params[vsParamKeyIndex].reserved
                                )
                          "
                          class="kanbanVsParamDataListItem_value color_vsText_red"
                        >
                          {{
                            collectionDatas[currentEquipmentId].twoAgoData[
                              index - 1
                            ].params[vsParamKeyIndex].value.toFixed(
                              collectionDatas[currentEquipmentId].twoAgoData[index - 1]
                                .params[vsParamKeyIndex].reserved
                            )
                          }}
                        </div>
                        <div
                          v-else-if="
                            collectionDatas[currentEquipmentId].datas[index - 1] &&
                            Math.round(
                              collectionDatas[currentEquipmentId].twoAgoData[index - 1]
                                .params[vsParamKeyIndex].value *
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].twoAgoData[
                                    index - 1
                                  ].params[vsParamKeyIndex].reserved
                                )
                            ) /
                              Math.pow(
                                10,
                                collectionDatas[currentEquipmentId].twoAgoData[index - 1]
                                  .params[vsParamKeyIndex].reserved
                              ) <
                              Math.round(
                                collectionDatas[currentEquipmentId].datas[index - 1]
                                  .params[vsParamKeyIndex].value *
                                  Math.pow(
                                    10,
                                    collectionDatas[currentEquipmentId].datas[index - 1]
                                      .params[vsParamKeyIndex].reserved
                                  )
                              ) /
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].datas[index - 1]
                                    .params[vsParamKeyIndex].reserved
                                )
                          "
                          class="kanbanVsParamDataListItem_value color_vsText_orange"
                        >
                          {{
                            collectionDatas[currentEquipmentId].twoAgoData[
                              index - 1
                            ].params[vsParamKeyIndex].value.toFixed(
                              collectionDatas[currentEquipmentId].twoAgoData[index - 1]
                                .params[vsParamKeyIndex].reserved
                            )
                          }}
                        </div>
                        <div v-else class="kanbanVsParamDataListItem_value">
                          {{
                            collectionDatas[currentEquipmentId].twoAgoData[
                              index - 1
                            ].params[vsParamKeyIndex].value.toFixed(
                              collectionDatas[currentEquipmentId].twoAgoData[index - 1]
                                .params[vsParamKeyIndex].reserved
                            )
                          }}
                        </div>
                        <img
                          v-if="
                            collectionDatas[currentEquipmentId].datas[index - 1] &&
                            Math.round(
                              collectionDatas[currentEquipmentId].twoAgoData[index - 1]
                                .params[vsParamKeyIndex].value *
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].twoAgoData[
                                    index - 1
                                  ].params[vsParamKeyIndex].reserved
                                )
                            ) /
                              Math.pow(
                                10,
                                collectionDatas[currentEquipmentId].twoAgoData[index - 1]
                                  .params[vsParamKeyIndex].reserved
                              ) >
                              Math.round(
                                collectionDatas[currentEquipmentId].datas[index - 1]
                                  .params[vsParamKeyIndex].value *
                                  Math.pow(
                                    10,
                                    collectionDatas[currentEquipmentId].datas[index - 1]
                                      .params[vsParamKeyIndex].reserved
                                  )
                              ) /
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].datas[index - 1]
                                    .params[vsParamKeyIndex].reserved
                                )
                          "
                          class="kanbanVsParamDataListItem_vsImg"
                          src="@/assets/v4/vsUp.png"
                        />
                        <img
                          v-else-if="
                            collectionDatas[currentEquipmentId].datas[index - 1] &&
                            Math.round(
                              collectionDatas[currentEquipmentId].twoAgoData[index - 1]
                                .params[vsParamKeyIndex].value *
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].twoAgoData[
                                    index - 1
                                  ].params[vsParamKeyIndex].reserved
                                )
                            ) /
                              Math.pow(
                                10,
                                collectionDatas[currentEquipmentId].twoAgoData[index - 1]
                                  .params[vsParamKeyIndex].reserved
                              ) <
                              Math.round(
                                collectionDatas[currentEquipmentId].datas[index - 1]
                                  .params[vsParamKeyIndex].value *
                                  Math.pow(
                                    10,
                                    collectionDatas[currentEquipmentId].datas[index - 1]
                                      .params[vsParamKeyIndex].reserved
                                  )
                              ) /
                                Math.pow(
                                  10,
                                  collectionDatas[currentEquipmentId].datas[index - 1]
                                    .params[vsParamKeyIndex].reserved
                                )
                          "
                          class="kanbanVsParamDataListItem_vsImg"
                          src="@/assets/v4/vsDown.png"
                        />

                        <div class="kanbanVsParamDataListItem_time">
                          {{
                            collectionDatas[currentEquipmentId].twoAgoData[index - 1].time
                          }}
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
              </div>
              <div class="kanbanVsParamData_chartsBg">
                <div id="kanbanVsParamCharts" class="kanbanVsParamData_charts"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="paramHistoryDialogFlag"
      v-if="paramHistoryDialogFlag"
      v-loading="paramHistoryDialogLoading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.5)"
      width="100%"
      center
      fullscreen
      top="0"
      :modal="false"
      :append-to-body="false"
      :show-close="false"
      custom-class="wholeChartPanel_dialog"
    >
      <div class="wholeChartPanelDialog_bg">
        <div class="wholeChartPanelDialog_contentBg">
          <div class="wholeChartPanelDialog_titleBar">
            <div class="wholeChartPanelDialog_titleLeft">
              <i class="wholeChartPanelDialog_titleSign el-icon-data-board"></i>
              <div class="wholeChartPanelDialog_title">
                {{
                  collectionDatas[currentEquipmentId].customizeName &&
                  collectionDatas[currentEquipmentId].customizeName !== ""
                    ? collectionDatas[currentEquipmentId].customizeName
                    : collectionDatas[currentEquipmentId].pointName
                    ? collectionDatas[currentEquipmentId].pointName
                    : ""
                }}
              </div>
            </div>
            <div class="wholeChartPanelDialog_titleCenter">
              <div
                :class="
                  historyCardType == '10'
                    ? 'wholeChartPanelDialog_card_o'
                    : 'wholeChartPanelDialog_card'
                "
                @click="changeCard('10')"
              >
                历史数据
              </div>
              <div
                :class="
                  historyCardType == '20'
                    ? 'wholeChartPanelDialog_card_o'
                    : 'wholeChartPanelDialog_card'
                "
                @click="changeCard('20')"
              >
                指标曲线
              </div>
            </div>
            <div class="wholeChartPanelDialog_titleRight">
              <div
                class="wholeChartPanelDialog_closeBtn"
                @click="paramHistoryDialogFlag = false"
              >
                <img src="~@/assets/v4/dialogCloseBtn.png" />
              </div>
            </div>
          </div>
          <div class="wholeChartPanel_searchArea">
            <div class="wholeChartPanelSearch_datePicker">
              <el-date-picker
                v-model="dateBetween"
                class="popDatePicker"
                type="daterange"
                align="right"
                unlink-panels
                size="mini"
                :clearable="false"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dateChange"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
            </div>
            <div v-if="historyCardType == '20'" class="wholeChartPanel_screenChooseArea">
              <div
                class="wholeChartPanelDialog_titleItemBg"
                @click.stop="changePagePermutationStatus(1)"
              >
                <img
                  v-if="pagePermutationStatus === 1"
                  src="@/assets/v4/pop_screen1_o.png"
                />
                <img v-else src="@/assets/v4/pop_screen1.png" style="cursor: pointer" />
              </div>
              <div
                class="wholeChartPanelDialog_titleItemBg"
                @click.stop="changePagePermutationStatus(2)"
              >
                <img
                  v-if="pagePermutationStatus === 2"
                  src="@/assets/v4/pop_screen4_o.png"
                />
                <img v-else src="@/assets/v4/pop_screen4.png" style="cursor: pointer" />
              </div>
              <div
                class="wholeChartPanelDialog_titleItemBg"
                @click.stop="changePagePermutationStatus(3)"
              >
                <img
                  v-if="pagePermutationStatus === 3"
                  src="@/assets/v4/pop_screen9_o.png"
                />
                <img v-else src="@/assets/v4/pop_screen9.png" style="cursor: pointer" />
              </div>
              <div
                class="wholeChartPanelDialog_titleItemBg"
                @click.stop="changePagePermutationStatus(5)"
              >
                <img
                  v-if="pagePermutationStatus === 5"
                  src="@/assets/v4/pop_screen12_o.png"
                />
                <img v-else src="@/assets/v4/pop_screen12.png" style="cursor: pointer" />
              </div>
            </div>
          </div>
          <paramHistoryTable
            v-if="historyCardType == '10'"
            ref="paramHistoryTable"
            :paramDataList="waterParamTimeList"
            :paramList="waterParamDatas"
            :height="paramHistoryTableHeight"
            :dataNum="paramHistoryDataMaxNum"
          ></paramHistoryTable>
          <div v-if="historyCardType == '20'" class="wholeChartPanelDialog_chartPanelBg">
            <div
              v-for="index in getColumNum(bottomChartData.length)"
              :key="index"
              class="wholeChartPanelDialog_chartPanelItemBg"
              :style="
                'height:' +
                100 / (pagePermutationStatus < 5 ? pagePermutationStatus : 3) +
                '%'
              "
            >
              <div
                v-for="rItem in pagePermutationStatus"
                :key="'0' + rItem"
                class="wholeChartPanelDialogChartPanelItemArea"
                :style="'width:' + 100 / pagePermutationStatus + '%'"
              >
                <div class="wholeChartPanelDialogChartPanelItem_bg">
                  <div
                    v-if="
                      bottomChartData.length > 0 &&
                      bottomChartData[rItem + (index - 1) * pagePermutationStatus - 1] &&
                      bottomChartData[rItem + (index - 1) * pagePermutationStatus - 1]
                        .name
                    "
                    class="wholeChartPanelDialogChartPanelItem_paramName"
                  >
                    {{
                      bottomChartData[rItem + (index - 1) * pagePermutationStatus - 1]
                        .name
                    }}
                  </div>
                  <div
                    v-if="
                      bottomChartData.length > 0 &&
                      bottomChartData[rItem + (index - 1) * pagePermutationStatus - 1] &&
                      bottomChartData[rItem + (index - 1) * pagePermutationStatus - 1]
                        .value
                    "
                    :id="
                      'wholeChart_' +
                      bottomChartData[rItem + (index - 1) * pagePermutationStatus - 1]
                        .value
                    "
                    class="wholeChartPanelDialogChartPanelItem_chart"
                  ></div>
                  <div
                    v-else
                    :id="'wholeChart_empty'"
                    class="wholeChartPanelDialogChartPanelItem_chart chartEmpty"
                  ></div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div v-if="historyCardType == '10' && waterParamTimeList.length > 0" class="historyCard_exportBtn" @click="exportHistoryData">导出数据</div> -->
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AMap from "AMap";
import utils from "../utils/utils";
import deepClone from "../utils/deepClone";
import paramHistoryTable from "../components/paramHistoryV4Table";
import mVue from "vue";
import eventBus from "../utils/eventBus";
import metaEquipmentList from "../components/metaEquipmentList";
import myecharts from "echarts";
require("echarts/map/js/china");
export default {
  name: "kanban",
  components: {
    metaEquipmentList,
    paramHistoryTable,
  },
  data() {
    return {
      map: null,
      disProvince: null,
      wsHeartTimeout: null,
      nowTimeout: null,
      ws: null,
      company: "",
      workCount: "",
      alertCount: "",
      // repairCount: '',
      debugCount: "",
      isFullFlag: false,
      btnFlagWaterLevel: true,
      btnFlagActualDatas: true,
      btnFlagParamPk: true,
      btnFlagSpectralCurve: true,
      btnFlagEquipmentList: true,
      currentEquipmentId: "",
      currentEquipmentType: "",
      equipmentList: {},
      equipmentSelectType: "10",
      fixedMarkerList: [],
      fixedMarkers: [],
      equTimeSum: 0,
      equCollectionSum: 0,
      collectionDatas: {},
      userParamList: [],
      vsDataList: [],
      vsDataPageIndex: 0, //参数对比当前页码
      vsParamKeyIndex: 0,
      waterLevel: "",
      levelDescription: "",
      nowTime: "",
      wholeAlarmEquipmentList: [],
      alarmEquipmentList: [],
      waterLevelEquipmentList: [],
      wavelength: "",
      dateBetween: [], //日期筛选
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      //历史数据
      paramHistoryDialogFlag: false,
      paramHistoryDialogLoading: false,
      paramHistoryTableHeight: 0,
      paramHistoryDataMaxNum: 0,
      waterParamDatas: [],
      waterParamTimeList: [],
      bottomChartData: [],
      historyCardType: "10",
      pagePermutationStatus: 5,
      wholeEcharts: {},
      // 便携式数据相关
      pointListData: [],
      currentPointId: "",
      currentScanTime: "",
      selectPointDatas: [],
      mobileReflectivityDatas: [],
      // charts
      equipmentDistribution: [],
      equipmentDistributionChart: null,
      kanbanVsParamCharts: null,
      waterSpectrumChart: null,
      colorJson: {
        0: {
          color: "#8FC31F",
          endColor: "rgba(143,195,31,0)",
          rgbColor: "rgba(143,195,31,0.3)",
          titleColor: "#6C9317",
        },
        1: {
          color: "#0273FF",
          endColor: "rgba(2,115,255,0)",
          rgbColor: "rgba(2,115,255,0.3)",
          titleColor: "#0830B4",
        },
        2: {
          color: "#00A0E9",
          endColor: "rgba(0,160,233,0)",
          rgbColor: "rgba(0,160,233,0.3)",
          titleColor: "#007BB3",
        },
        3: {
          color: "#8C38FF",
          endColor: "rgba(140,56,255,0)",
          rgbColor: "rgba(140,56,255,0.3)",
          titleColor: "#4F1F9B",
        },
        4: {
          color: "#54E15C",
          endColor: "rgba(84,225,92,0)",
          rgbColor: "rgba(84,225,92,0.3)",
          titleColor: "#37943D",
        },
        5: {
          color: "#E937F0",
          endColor: "rgba(233,55,240,0)",
          rgbColor: "rgba(233,55,240,0.3)",
          titleColor: "#631E78",
        },
        6: {
          color: "#E41261",
          endColor: "rgba(228,18,97,0)",
          rgbColor: "rgba(228,18,97,0.3)",
          titleColor: "#922455",
        },
        7: {
          color: "#009944",
          endColor: "rgba(0,153,68,0)",
          rgbColor: "rgba(0,153,68,0.3)",
          titleColor: "#00682E",
        },
        8: {
          color: "#EF9A22",
          endColor: "rgba(239,154,34,0)",
          rgbColor: "rgba(239,154,34,0.3)",
          titleColor: "#B3721E",
        },
        9: {
          color: "#FFF100",
          endColor: "rgba(255,241,0,0)",
          rgbColor: "rgba(255,241,0,0.3)",
          titleColor: "#B3AA00",
        },
        10: {
          color: "#01DFCD",
          endColor: "rgba(1,223,205,0)",
          rgbColor: "rgba(1,223,205,0.3)",
          titleColor: "#009890",
        },
        11: {
          color: "#F3FFA5",
          endColor: "rgba(243,255,165,0)",
          rgbColor: "rgba(243,255,165,0.3)",
          titleColor: "#929963",
        },
      },
      wlOrderByFlag: "up",
    };
  },
  created() {
    this.getNowTime();
    window.onresize = (res) => {
      if (this.equipmentDistributionChart) {
        this.equipmentDistributionChart.resize();
      }
      if (this.kanbanVsParamCharts) {
        this.kanbanVsParamCharts.resize();
      }
      // if(this.waterSpectrumChart){
      //   this.waterSpectrumChart.resize()
      // }
      if (this.paramHistoryDialogFlag) {
        if (this.historyCardType == "10") {
          this.paramHistoryTableHeight =
            this.$refs["kanbanWindow"].clientHeight - 38 - 55 - 74 - 60;
        } else if (this.historyCardType == "20") {
          for (let key in this.wholeEcharts) {
            this.wholeEcharts[key].resize();
          }
        }
      }
      var isFull = !!(
        document.webkitIsFullScreen ||
        document.mozFullScreen ||
        document.msFullscreenElement ||
        document.fullscreenElement
      );
      if (isFull == false) {
        this.isFullFlag = false;
      } else {
        this.isFullFlag = true;
      }
      // if(!this.isFullscreen()) {
      //   this.isFullFlag = false
      // }else {
      //   this.isFullFlag = true
      // }
    };
    this.initWebsocket();
  },
  mounted() {
    this.dateBetween = [];
    let date = new Date();
    let endDate = date;
    /**
     * 展示环境功能 start
     */
    // let startDate = date
    /**
     * 展示环境功能 end
     */
    let startDate = new Date(date.getTime() - 7 * 24 * 60 * 60 * 1000);
    this.dateBetween.push(startDate);
    this.dateBetween.push(endDate);
    this.$nextTick(() => {
      $("#progoo_header").hide();
      $("#progoo_menu").hide();
      this.isFullFlag = false;
    });
  },
  destoryed() {
    if (this.nowTimeout) {
      clearTimeout(this.nowTimeout);
    }
  },
  methods: {
    initWebsocket() {
      let _this = this;
      let username = localStorage.getItem("username");
      if ("WebSocket" in window) {
        // 打开一个 web socket
        // let ws = new WebSocket(process.env.PROGOO_SOCKET + `?${key}&${timeValue}`)
        let ws = new WebSocket(process.env.PROGOO_SOCKET + `ws/${username}`);
        _this.ws = ws;
        // let ws = new WebSocket(`ws://39.98.121.176:32766/?${key}&${time}`);
        ws.onopen = function () {
          // Web Socket 已连接上，使用 send() 方法发送数据
          _this.wsHeartTimeout = setTimeout(_this.doHeartWithWs, 60000);
        };
        ws.onmessage = function (evt) {
          try {
            let msg = JSON.parse(evt.data);
            _this.websocketMsgHandle(msg);
          } catch (error) {
            console.log("不是个json对象");
          }
        };
        ws.onclose = function (e) {
          // 关闭 websocket
          // _this.$notify.error({
          //   title: '错误',
          //   message: 'websocket连接失败，请重新登录'
          // });
          console.log(e);
          // _this.doLogout()
        };
        ws.onerror = function () {
          _this.$notify.error({
            title: "错误",
            message: "websocket连接失败，请重新登录",
          });

          // alert("onerror")
          // _this.doLogout()
        };
      } else {
        // 浏览器不支持 WebSocket
        alert("您的浏览器不支持 WebSocket!");
      }
    },
    websocketMsgHandle(msg) {
      let dataType = msg.type;
      console.log(msg);
      if (dataType === 17) {
        this.company = msg.company;
        // this.allCount = msg.all_count
        this.workCount = msg.work_count;
        this.alertCount = msg.alert_count;
        // this.repairCount = msg.stop_count
        this.debugCount = msg.fault_count;

        this.equipmentList["10"] = msg.fixed_type_list ? msg.fixed_type_list : []; //浮标式
        this.equipmentList["20"] = msg.mobile_terminal_list
          ? msg.mobile_terminal_list
          : []; //便携式
        this.equipmentList["30"] = msg.unmanned_ship_list ? msg.unmanned_ship_list : []; //无人船改为岸基式
        this.equipmentList["40"] = msg.conduit_type_list ? msg.conduit_type_list : []; //管道式
        this.initMapInfo(msg);
        this.$nextTick(() => {
          this.$refs.equipFixed.initData();
        });
        this.getOverviewDatas();
      } else if (dataType === 101) {
        if (msg.equipmentType == "2") {
          if (this.currentEquipmentId == msg.equipmentId) {
            if (this.currentEquipmentId !== "") {
              let username = localStorage.getItem("username");
              let msgJson = {
                username: username,
                deviceSerial: [this.currentEquipmentId],
                oilCommand: {
                  //命令对象
                  commandId: "point_list", //命令id 移动设备采集点列表
                  addedValue: "1", //命令值 1代表设备最新一次查询数据
                  equipmentType: "2", // 1固定式设备 2移动设备 3无人船
                },
              };
              this.ws.send(JSON.stringify(msgJson));
            }
          }
        } else {
          if (this.collectionDatas[msg.equipmentId]) {
            //TODO ---------- 刷新所有显示点位的数据
            this.getCollectionSurveyDatas([msg.equipmentId]);
            if (this.paramHistoryDialogFlag) {
              let username = localStorage.getItem("username");
              let startDate = utils.formatDate("yyyy-MM-dd", this.dateBetween[0]);
              let endDate = utils.formatDate("yyyy-MM-dd", this.dateBetween[1]);
              let msgJson = {
                username: username,
                deviceSerial: [this.currentEquipmentId],
                oilCommand: {
                  //命令对象
                  commandId: "history", //命令id 1代表设备列表点击事件
                  startDate: startDate,
                  endDate: endDate,
                  addedValue: "1", //命令值 1代表设备最新一次查询数据
                  equipmentType: "1", // 1固定式设备 2移动设备 3无人船
                },
              };
              this.dataInit(msgJson);
            }
          }
        }
      } else if (dataType === 110) {
        //便携式设备数据
        if (this.currentEquipmentId === msg.id) {
          this.pointListData = msg.list;
          this.drawObtainPointOnMap(this.pointListData);
        }
      } else if (dataType === 27) {
        //设备状态变化
        this.$refs.equipFixed.changeEquipmentStatus(msg.status);
      } else if (dataType === 120) {
        //有新的报警信息
        this.getOverviewDatas();
      }
    },
    vsChooseParam(index) {
      if (this.vsParamKeyIndex != index) {
        this.vsParamKeyIndex = index;
        this.$nextTick(() => {
          this.drawVsCharts();
        });
      }
    },
    initMapInfo(data) {
      let _this = this;
      let depth = 2;
      if (this.map) {
        this.map.setCenter(data.center);
      } else {
        this.map = new AMap.Map("kanbanMap", {
          zoom: 6,
          resizeEnable: true,
          center: data.center,
          pitch: 50,
          // mapStyle: 'amap://styles/7e4cd6abdc9358589d0a688da69a0b1c',
          mapStyle: "amap://styles/14bc8cc35ebf8368317dd5133b96a7f8",
          viewMode: "3D",
        });
      }
      // this.map.on('click', this.mapClickListener);
      let adCode = _this.getEquipAreaCodeList();
      this.map.clearMap();
      _this.initProvince(adCode, depth);
      if (_this.equipmentSelectType == "20") {
        //请求移动设备数据
        if (_this.currentEquipmentId !== "") {
          let username = localStorage.getItem("username");
          let msgJson = {
            username: username,
            deviceSerial: [_this.currentEquipmentId],
            oilCommand: {
              //命令对象
              commandId: "point_list", //命令id 移动设备采集点列表
              addedValue: "1", //命令值 1代表设备最新一次查询数据
              equipmentType: "2", // 1固定式设备 2移动设备 3无人船
            },
          };
          _this.ws.send(JSON.stringify(msgJson));
        }
      } else {
        _this.drawEquipOnMap();
      }
    },
    initProvince(code, dep) {
      dep = typeof dep === "undefined" ? 2 : dep;
      this.disProvince && this.disProvince.setMap(null);
      this.disProvince = new AMap.DistrictLayer.Province({
        zIndex: 12,
        adcode: code,
        depth: typeof dep === "undefined" ? 2 : dep,
        styles: {
          fill: "rgba(255,157,70,0.05)",
          "province-stroke": "#ff9d46",
          "city-stroke": "#501BC2", // 中国地级市边界
          "county-stroke": "#ff9d46", // 中国区县边界
        },
      });
      let polygons = [];
      // var polygon = new AMap.Polygon({
      //     strokeWeight: 3,
      //     path: bounds[i],
      //     fillOpacity: 0.4,
      //     fillColor: '#80d8ff',
      //     strokeColor: '#0091ea'
      // });
      // polygons.push(polygon);

      this.disProvince.setMap(this.map);
    },
    getCollectionSurveyDatas(eIds, callback) {
      this.$fetch({
        // url: process.env.PROGOO_GATE_WATER + "admin/equipmentInfo/details",
        url: process.env.PROGOO_GATE_WATER + "equipment/getEquipmentInfoDetailByPoint",
        method: "post",
        data: eIds,
      }).then((res) => {
        for (let key in res.data.result) {
          this.collectionDatas[key] = res.data.result[key];
          if (!this.collectionDatas[key].datas) {
            this.collectionDatas[key].datas = [];
          }
        }
        if (callback && typeof callback === "function") {
          callback();
        }
      });
    },
    drawObtainPointOnMap(pointData) {
      let markerList = [];
      let _this = this;
      let oldPointId = _this.currentPointId;
      _this.map.clearMap();
      for (let i in pointData) {
        if (_this.currentPointId === "") {
          _this.currentPointId =
            pointData[i].children.length > 0 ? pointData[i].children[0].id : "";
          _this.currentScanTime =
            pointData[i].children.length > 0 ? pointData[i].children[0].scanTime : "";
        }

        let iconImg = "";
        let markerContent = "";
        let markerZIndex = 100;
        if (_this.hasPoint(pointData[i].children)) {
          iconImg = process.env.PROGOO_IMAGE + "thumbtack/point_o.png";

          let position = new AMap.LngLat(pointData[i].longitude, pointData[i].latitude);
          _this.map.setCenter(position);

          markerContent =
            '<div style="background-color:hsla(120, 100%, 50%, 0.7);min-width:24px;height:24px;line-height:24px;box-sizing:border-box;padding:0 5px;border-radius:12px;text-align:center;">' +
            pointData[i].children.length +
            "</div>";
          markerZIndex = 101;
        } else {
          iconImg = process.env.PROGOO_IMAGE + "thumbtack/point.png";

          markerContent =
            '<div style="background-color:hsla(200, 100%, 50%, 0.7);min-width:24px;height:24px;line-height:24px;box-sizing:border-box;padding:0 5px;border-radius:12px;text-align:center;">' +
            pointData[i].children.length +
            "</div>";
          markerZIndex = 100;
        }
        let icon = new AMap.Icon({
          size: new AMap.Size(40, 40), // 图标尺寸
          image: iconImg, // Icon的图像
          imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
          imageSize: new AMap.Size(40, 40), // 根据所设置的大小拉伸或压缩图片
        });
        let marker = new AMap.Marker({
          position: new AMap.LngLat(pointData[i].longitude, pointData[i].latitude),
          title: pointData[i].id,
          icon: icon,
          anchor: "bottom-center",
          offset: new AMap.Pixel(0, 12),
          content: markerContent,
          zIndex: markerZIndex,
        });

        markerList.push(marker);

        //marker 点击时打开
        marker.on("click", function (e) {
          _this.openPointListOnMap(e.target.w.title, marker);
        });
      }
      _this.map.add(markerList);
      _this.map.setZoom(15);
      if (oldPointId === "" && _this.currentPointId !== "") {
        this.mobileDataInit(_this.currentPointId);
      }
    },
    hasPoint(list) {
      for (let i in list) {
        if (list[i].id === this.currentPointId) {
          return true;
        }
      }
      return false;
    },
    drawEquipOnMap() {
      let that = this;
      that.fixedMarkerList = [];
      that.fixedMarkers = [];
      // let circleList = []
      that.map.clearMap(); // 清除地图覆盖物
      let type = this.equipmentSelectType;
      if (this.currentEquipmentId === "") {
        type = "10";
        this.map.setZoom(6);
      } else {
        this.map.setZoom(15);
      }
      let equipmentListForMap = deepClone(that.equipmentList[type]);
      for (let i in equipmentListForMap) {
        for (let j in equipmentListForMap[i].list) {
          let itemLongitude;
          let itemLatitude;
          if (
            Object.keys(equipmentListForMap[i].list[j].gps_array).length > 0 &&
            equipmentListForMap[i].list[j].gps_array.longitude
          ) {
            if (
              equipmentListForMap[i].list[j].gps_array.longitude &&
              parseInt(equipmentListForMap[i].list[j].gps_array.longitude) != 0
            ) {
              itemLongitude = equipmentListForMap[i].list[j].gps_array.longitude;
              itemLatitude = equipmentListForMap[i].list[j].gps_array.latitude;
            } else {
              itemLongitude = equipmentListForMap[i].list[j].alert.longitude;
              itemLatitude = equipmentListForMap[i].list[j].alert.latitude;
            }
          } else {
            itemLongitude = equipmentListForMap[i].list[j].alert.longitude;
            itemLatitude = equipmentListForMap[i].list[j].alert.latitude;
          }
          let onType =
            equipmentListForMap[i].list[j].on_type != 0
              ? equipmentListForMap[i].list[j].on_type
              : "2";
          let iconImg = process.env.PROGOO_IMAGE + "thumbtack/sign_" + onType + ".png";

          let markerZIndex = 100;
          if (that.currentEquipmentId === equipmentListForMap[i].list[j].pointId) {
            //设备在线运行时间
            if (equipmentListForMap[i].list[j].first_use) {
              this.equTimeSum = this.getHours(equipmentListForMap[i].list[j].first_use);
            } else {
              this.equTimeSum = 0;
            }
            if (equipmentListForMap[i].list[j].collNum) {
              this.equCollectionSum = equipmentListForMap[i].list[j].collNum;
            } else {
              this.equCollectionSum = 0;
            }

            let position = new AMap.LngLat(itemLongitude, itemLatitude);
            that.map.setCenter(position);
            markerZIndex = 101;

            let circle = new AMap.Circle({
              center: new AMap.LngLat(
                equipmentListForMap[i].list[j].alert.longitude,
                equipmentListForMap[i].list[j].alert.latitude
              ), // 圆心位置
              radius: equipmentListForMap[i].list[j].alert.radius, // 圆半径
              fillColor: "green", // 圆形填充颜色
              fillOpacity: 0.3,
              strokeStyle: "dashed",
              strokeColor: "red", // 描边颜色
              strokeWeight: 1, // 描边宽度
            });
            that.map.add(circle);
            that.openEquitInfoOnMap(equipmentListForMap[i].list[j], position);
          } else {
            markerZIndex = 100;
          }
          let icon = new AMap.Icon({
            size: new AMap.Size(40, 40), // 图标尺寸
            image: iconImg, // Icon的图像
            imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
            imageSize: new AMap.Size(40, 40), // 根据所设置的大小拉伸或压缩图片
          });
          let marker = new AMap.Marker({
            position: new AMap.LngLat(itemLongitude, itemLatitude),
            id:
              equipmentListForMap[i].list[j].pointId +
              "_" +
              equipmentListForMap[i].area_code,
            wave: equipmentListForMap[i].list[j].wavelength,
            title: equipmentListForMap[i].list[j].pointName,
            icon: icon,
            anchor: "bottom-center",
            offset: new AMap.Pixel(0, 12),
            zIndex: markerZIndex,
          });
          that.fixedMarkers.push(equipmentListForMap[i].list[j].pointId);
          that.fixedMarkerList.push(marker);

          //marker 点击时打开
          marker.on("click", function (e) {
            let eId = utils.getStrByUnderlineBefore(e.target.w.id);
            let areaId = utils.getStrByUnderlineAfter(e.target.w.id);
            let wavelength = "";
            if (e.target.w.wave && e.target.w.wave != "") {
              wavelength = e.target.w.wave;
            }
            that.$refs.equipFixed.chooseEquipment(eId, areaId, wavelength);
          });
        }
      }

      that.map.add(that.fixedMarkerList);
      // that.map.add(circleList);
    },
    getEquipAreaCodeList(pointId) {
      if (pointId && pointId !== "") {
        let code = "";
        for (let i in this.equipmentList[this.equipmentSelectType]) {
          let item = this.equipmentList[this.equipmentSelectType][i];
          for (let j in item.list) {
            if (item.list[j].pointId === pointId) {
              code = item.area_code;
              return code;
            }
          }
        }
        return code;
      } else {
        let codeList = [];
        for (let i in this.equipmentList[this.equipmentSelectType]) {
          let item = this.equipmentList[this.equipmentSelectType][i];
          codeList.push(item.area_code);
        }
        return codeList;
      }
    },
    getOverviewDatas() {
      /**
       * 概览数据接口
       */
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/equipment/warningInfo",
        method: "get",
        param: {},
      }).then((res) => {
        this.wholeAlarmEquipmentList = [];
        let alarmList = res.data.result.equipmentAlarmList
          ? res.data.result.equipmentAlarmList
          : [];
        for (let i in alarmList) {
          // || alarmList[i].maxWarning == '0202' 设备低电量临时删除TODO
          if (
            alarmList[i].maxWarning == "0101" ||
            alarmList[i].maxWarning == "0102" ||
            alarmList[i].maxWarning == "0103" ||
            alarmList[i].maxWarning == "0104" ||
            alarmList[i].maxWarning == "0201"
          ) {
            this.wholeAlarmEquipmentList.push(alarmList[i]);
          }
        }
        let showLength = 10;
        if (this.wholeAlarmEquipmentList.length < 10) {
          showLength = this.wholeAlarmEquipmentList.length;
        }
        for (let i = 0; i < showLength; i++) {
          this.alarmEquipmentList.push(this.wholeAlarmEquipmentList[i]);
        }
        this.equipmentDistribution = res.data.result.equipmentDistribution
          ? res.data.result.equipmentDistribution
          : [];
        this.showEquipmentDistribution(this.equipmentDistribution);
        this.waterLevelEquipmentList = res.data.result.rankOfWaterLevel;
      });
    },
    drawWaterSpectrumChart(isClear) {
      if (this.btnFlagSpectralCurve) {
        let yDatas = [];
        let centerWaveLength = [];
        if (!isClear) {
          if (this.currentEquipmentType != "20") {
            if (
              this.currentEquipmentId != "" &&
              this.collectionDatas[this.currentEquipmentId]
            ) {
              yDatas = this.collectionDatas[
                this.currentEquipmentId
              ].originalDatas.reflectivity.split(",");
            }
            centerWaveLength = this.wavelength.split(",");
          } else {
            yDatas = this.mobileReflectivityDatas;
            centerWaveLength = this.wavelength;
          }
        }
        let echarts = require("echarts");
        let wsDom = document.getElementById("waterSpectrumChart");
        if (!wsDom) {
          return;
        }
        this.waterSpectrumChart = echarts.init(wsDom);
        this.waterSpectrumChart.setOption({
          color: ["#00FFFF"],
          tooltip: {
            trigger: "axis",
          },
          grid: {
            left: "15%",
            bottom: "5%",
            top: "8%",
            height: "78%",
            right: "5%",
            show: true,
            // backgroundColor: '#002738'
            // containLabel: true
          },
          xAxis: {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#C0FFFF",
              },
            },
            axisLabel: {
              show: true,
              fontSize: 10,
            },
            boundaryGap: false,
            data: centerWaveLength,
          },
          yAxis: {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#C0FFFF",
              },
            },
            axisLabel: {
              show: true,
              fontSize: 10,
            },
            splitLine: {
              lineStyle: {
                color: ["#34697c"],
              },
            },
            scale: true,
          },
          series: [
            {
              name: "反射率",
              type: "line",
              stack: "总量",
              smooth: true,
              data: yDatas,
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "rgba(62,124,235,0.5)",
                  },
                  {
                    offset: 1,
                    color: "rgba(62,124,235,0)",
                  },
                ]),
              },
            },
          ],
        });
        this.$nextTick(() => {
          this.waterSpectrumChart.resize();
        });
      }
    },
    showEquipmentDistribution(datas) {
      // let xAxis = []
      // let yAxis = []
      let myData = [];
      for (let i in datas) {
        let item = {};
        item.name = datas[i].name.substr(0, datas[i].name.length - 1);
        item.value = datas[i].number;
        myData.push(item);
        // xAxis.push(datas[i].name)
        // yAxis.push(datas[i].number)
      }
      // let echarts = require('echarts')
      let chartDom = document.getElementById("equipmentDistributionChart");
      this.equipmentDistributionChart = myecharts.init(chartDom);
      let option = {
        // 进行相关配置
        tooltip: {}, // 鼠标移到图里面的浮动提示框
        dataRange: {
          show: false,
          min: 0,
          max: 15,
          text: ["High", "Low"],
          realtime: true,
          calculable: true,
          color: [
            "#d73027",
            "#f46d43",
            "#fdae61",
            "#fee090",
            "#ffffbf",
            "#e0f3f8",
            "#abd9e9",
            "#74add1",
          ],
        },
        geo: {
          // 这个是重点配置区
          map: "china", // 表示中国地图
          zoom: 2,
          center: [114.256467, 30.638526],
          roam: true,
          label: {
            emphasis: {
              show: true, // 是否显示对应地名
              textStyle: {
                fontSize: "11",
              },
            },
          },
          itemStyle: {
            normal: {
              areaColor: "#1b64d8",
              zoom: 0.5,
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: "#f0ff18",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            name: "设备数量", // 浮动框的标题
            type: "map",
            geoIndex: 0,
            data: myData,
          },
        ],
      };

      // let option = {
      //   color: ['#6FB4DC'],
      //   grid: {
      //     left: '10%',
      //     bottom: '8%',
      //     top: '5%',
      //     height: '78%',
      //     right: '5%',
      //     show: true,
      //     // backgroundColor: '#002738'
      //     // containLabel: true
      //   },
      //   xAxis: {
      //     type: 'category',
      //     data: xAxis,
      //     axisLine: {
      //       show: false,
      //       lineStyle: {
      //         color: '#CCF2FF',
      //       }
      //     },
      //     axisLabel: {
      //       show: true,
      //       fontSize: 10,
      //       rotate: 40
      //     },
      //     axisTick: {
      //       show: false
      //     }
      //   },
      //   yAxis: {
      //     type: 'value',
      //     axisLine: {
      //       show: false,
      //       lineStyle: {
      //         color: '#CCF2FF'
      //       }
      //     },
      //     axisLabel: {
      //       show: true,
      //       fontSize: 10
      //     },
      //     splitLine: {
      //       lineStyle: {
      //           color: ['#34697c']
      //       }
      //     },
      //   },
      //   series: [{
      //       data: yAxis,
      //       type: 'bar',
      //       barWidth: 10,
      //       label: {
      //         show: true,
      //         position: 'inside',
      //         color: '#fff',
      //         fontSize: 8
      //       },
      //   }]
      // };

      option && this.equipmentDistributionChart.setOption(option);
      this.$nextTick(() => {
        this.equipmentDistributionChart.resize();
      });
    },
    getNowTime() {
      let newDate = new Date();
      // this.nowDate = utils.formatDate("yyyy-MM-dd", newDate)
      this.nowTime = utils.formatDate("hh:mm:ss", newDate);

      this.nowTimeout = setTimeout(this.getNowTime, 1000);
    },
    openPointListOnMap(eId, marker) {
      for (let i in this.pointListData) {
        if (eId == this.pointListData[i].id) {
          var MyComponent = mVue.extend({
            data: function () {
              return {
                cPId: "",
              };
            },
            props: ["pLData", "currentPointId"],
            template: `<div class="szEquipInfo_bg">
                        <div class="szEquipInfo_title">
                          <div class="szEquipInfoTitle_sign"></div>
                          <div class="szEquipInfoTitle_text">设备采集点位列表</div>
                        </div>
                        <div class="szPointList_infoArea">
                          <div class="szPointList_infoAreaBg">
                            <div v-for="(item,index) in pLData.children" :key="index" @click="pointItemClick(item)" :class="cPId === item.id ? 'szPointList_pointItem_o': 'szPointList_pointItem'">
                              <div class="szPointList_pointItemIcon">
                                <i v-if="cPId === item.id" class="el-icon-check"></i>
                                <i v-else class="el-icon-check" style="color: grey"></i>
                              </div>
                              <div class="szPointList_pointItemText">采集时间：{{item.scanTime}}</div>
                            </div>
                          </div>
                        </div>
                      </div>`,
            mounted() {
              this.cPId = this.currentPointId;
            },
            methods: {
              pointItemClick: function (e) {
                if (this.cPId != e.id) {
                  this.cPId = e.id;
                  eventBus.$emit("pointInfo", e);
                }
              },
            },
          });
          var component = new MyComponent({
            propsData: {
              pLData: this.pointListData[i],
              currentPointId: this.currentPointId,
            },
          }).$mount();
          // new MyComponent().$mount();
          this.infoWindow = new AMap.InfoWindow({
            isCustom: true, //使用自定义窗体
            content: component.$el,
            //基点指向marker的头部位置
            offset: new AMap.Pixel(0, -31),
          });
          this.infoWindow.open(this.map, marker.getPosition());
          this.infoWindow.on("open", this.infoWindowOpen("open"));

          break;
        }
      }
    },
    infoWindowOpen(e) {
      eventBus.$off("pointInfo");
      eventBus.$on("pointInfo", (item) => {
        this.currentPointId = item.id;
        this.currentScanTime = item.scanTime;
        this.drawObtainPointOnMap(this.pointListData);
        if (this.currentEquipmentId !== "") {
          this.mobileDataInit(item.id);
        }
      });
    },
    openEquitInfoOnMap(equipmentInfo, position) {
      // 电量高中低 ----------modify by ldc 20211220 start -------------
      let elecText = "";
      if (
        equipmentInfo.equipmentRecord.electricity &&
        equipmentInfo.equipmentRecord.electricity != 0 &&
        equipmentInfo.version >= 3
      ) {
        let elec = parseFloat(equipmentInfo.equipmentRecord.electricity);
        if (elec >= 12) {
          elecText = "高";
        } else if (elec >= 11.5 && elec < 12) {
          elecText = "中";
        } else {
          elecText = "低";
        }
      } else {
        elecText = "-";
      }
      // 电量高中低 ----------modify by ldc 20211220 end -------------
      let content =
        '<div class="equInfoWin"><div class="equInfoWin_bg"><div class="equInfoWin_header color_text_blue">设备信息</div>';
      content += '<div class="equInfoWin_contentBg">';
      content +=
        '<div class="equInfoWinContent_itemBg"><div class="equInfoWinContentItem_title">设备名称：</div><div class="equInfoWinContentItem_info">' +
        (equipmentInfo.customizeName && equipmentInfo.customizeName !== ""
          ? equipmentInfo.customizeName
          : equipmentInfo.pointName) +
        "</div></div>";
      content +=
        '<div class="equInfoWinContent_itemBg"><div class="equInfoWinContentItem_title">电池电量：</div><div class="equInfoWinContentItem_info">' +
        elecText +
        "</div></div>";
      // content += '<div class="equInfoWinContent_itemBg"><div class="equInfoWinContentItem_title">电池电量：</div><div class="equInfoWinContentItem_info">' + (equipmentInfo.equipmentRecord.elecPercent && equipmentInfo.equipmentRecord.elecPercent != 0 && equipmentInfo.version >= 3 ? parseInt(equipmentInfo.equipmentRecord.elecPercent) + '%' : '-') + '</div></div>'
      content +=
        '<div class="equInfoWinContent_itemBg"><div class="equInfoWinContentItem_title">在线运行：</div><div class="equInfoWinContentItem_info">' +
        (this.equTimeSum ? this.equTimeSum + "小时" : "-") +
        "</div></div>";
      content +=
        '<div class="equInfoWinContent_itemBg"><div class="equInfoWinContentItem_title">累计采集：</div><div class="equInfoWinContentItem_info">' +
        (this.equCollectionSum ? this.equCollectionSum + "条" : "-") +
        "</div></div>";
      content +=
        '<div class="equInfoWinContent_itemBg"><div class="equInfoWinContentItem_title">设备版本：</div><div class="equInfoWinContentItem_info">' +
        (equipmentInfo.version ? equipmentInfo.version : "-") +
        "</div></div>";
      content +=
        '<div class="equInfoWinContent_itemBg"><div class="equInfoWinContentItem_title">设备序列号：</div><div class="equInfoWinContentItem_info">' +
        (equipmentInfo.sernumber && equipmentInfo.sernumber != 0
          ? equipmentInfo.sernumber
          : "-") +
        "</div></div>";
      content += "</div></div></div>";
      this.infoWindow = new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: content,
        //基点指向marker的头部位置
        offset: new AMap.Pixel(0, -31),
      });
      this.infoWindow.open(this.map, position);
    },
    paramScroll(forward) {
      let paramScrollDoc = document.getElementById("kanbanVsParamScroll");
      if (forward === "left") {
        if (paramScrollDoc.scrollLeft > 0) {
          paramScrollDoc.scrollTo({
            left: paramScrollDoc.scrollLeft - 100,
            behavior: "smooth",
          });
        }
      } else if (forward === "right") {
        if (
          paramScrollDoc.scrollLeft <
          paramScrollDoc.scrollWidth - paramScrollDoc.clientWidth
        ) {
          paramScrollDoc.scrollTo({
            left: paramScrollDoc.scrollLeft + 100,
            behavior: "smooth",
          });
        }
      }
    },
    dataVsPageChange(forward) {
      if (forward === "left") {
        for (let i in this.vsDataList) {
          let elItem = $(this.$refs["vs_" + i]);
          elItem.css(
            "transform",
            "translateX(" + ((i - this.vsDataPageIndex) * 100 + 100) + "%)"
          );
        }
        this.vsDataPageIndex--;
      } else if (forward === "right") {
        for (let i in this.vsDataList) {
          let elItem = $(this.$refs["vs_" + i]);
          elItem.css(
            "transform",
            "translateX(" + ((i - this.vsDataPageIndex) * 100 - 100) + "%)"
          );
        }
        this.vsDataPageIndex++;
      } else if (forward === "refresh") {
        for (let i in this.vsDataList) {
          let elItem = $(this.$refs["vs_" + i]);
          elItem.css("transform", "translateX(" + i * 100 + "%)");
        }
        this.vsDataPageIndex = 0;
      }
    },
    changeVsEquipment(vsDatas) {
      let emptyList = [];
      let vsList = [];
      for (let i in vsDatas) {
        if (
          this.collectionDatas[vsDatas[i]] &&
          Object.keys(this.collectionDatas[vsDatas[i]]).length > 0
        ) {
          vsList.push(this.collectionDatas[vsDatas[i]]);
        } else {
          emptyList.push(vsDatas[i]);
        }
      }
      if (emptyList.length > 0) {
        this.getCollectionSurveyDatas(emptyList, () => {
          for (let i in emptyList) {
            vsList.push(this.collectionDatas[emptyList[i]]);
          }
          this.vsDataList = deepClone(vsList);
          this.dataVsPageChange("refresh");
          this.$nextTick(() => {
            this.drawVsCharts();
          });
        });
      } else {
        this.vsDataList = deepClone(vsList);
        this.dataVsPageChange("refresh");
        if (this.collectionDatas[this.currentEquipmentId]) {
          this.$nextTick(() => {
            this.drawVsCharts();
          });
        }
      }
    },
    clearData() {
      this.levelDescription = "";
      // this.drawWaterSpectrumChart(true)
    },
    changeEqType(type) {
      if (this.equipmentSelectType !== type) {
        this.equipmentSelectType = type;
      }
    },
    onEquipmentChoose(eId, wavelength) {
      this.currentEquipmentType = this.equipmentSelectType;
      this.selectPointDatas = [];
      this.mobileReflectivityDatas = [];
      if (this.equipmentSelectType == "20" && eId !== "") {
        this.currentPointId = "";
        this.currentEquipmentId = eId;
        //请求移动设备数据
        if (this.currentEquipmentId !== "") {
          let username = localStorage.getItem("username");
          let msgJson = {
            username: username,
            deviceSerial: [this.currentEquipmentId],
            oilCommand: {
              //命令对象
              commandId: "point_list", //命令id 移动设备采集点列表
              addedValue: "1", //命令值 1代表设备最新一次查询数据
              equipmentType: "2", // 1固定式设备 2移动设备 3无人船
            },
          };
          this.ws.send(JSON.stringify(msgJson));
        }
      } else {
        this.currentEquipmentId = eId;
        if (this.currentEquipmentId !== "") {
          this.clearData();
          if (
            !(
              this.collectionDatas[eId] &&
              Object.keys(this.collectionDatas[eId]).length > 0 &&
              this.collectionDatas[eId].datas.length > 0
            )
          ) {
            this.getCollectionSurveyDatas([eId], () => {
              this.waterLevel = this.collectionDatas[eId].waterLevel
                ? this.collectionDatas[eId].waterLevel
                : 6;
              this.getLevelDes();
              this.userParamList = [];
              if (this.collectionDatas[eId].datas.length > 0) {
                for (let i in this.collectionDatas[eId].datas[0].params) {
                  this.userParamList.push(this.collectionDatas[eId].datas[0].params[i]);
                }
                if (!this.vsParamKeyIndex || this.vsParamKeyIndex == "") {
                  this.vsParamKeyIndex = 0;
                }
              }
              this.$nextTick(() => {
                this.drawVsCharts();
              });
              this.wavelength = wavelength;
              // this.drawWaterSpectrumChart()
            });
          } else {
            this.waterLevel = this.collectionDatas[eId].waterLevel;
            this.$nextTick(() => {
              this.getLevelDes();
            });
            this.userParamList = [];
            if (this.collectionDatas[eId].datas.length > 0) {
              for (let i in this.collectionDatas[eId].datas[0].params) {
                this.userParamList.push(this.collectionDatas[eId].datas[0].params[i]);
              }
              if (!this.vsParamKeyIndex || this.vsParamKeyIndex == "") {
                this.vsParamKeyIndex = 0;
              }
            }
            this.wavelength = wavelength;
            this.$nextTick(() => {
              this.drawVsCharts();
              // this.drawWaterSpectrumChart()
            });
          }
        } else {
          this.$nextTick(() => {
            this.drawVsCharts();
            this.showEquipmentDistribution(this.equipmentDistribution);
          });
        }
        this.drawEquipOnMap();
      }
    },
    getLeftDistance(sign) {
      if (sign && sign === "level") {
        let left = "right: 1px;";
        switch (this.waterLevel) {
          case 1:
            left = "left: 1px;";
            break;
          case 2:
            left = "left: 23%;margin-left: -13px;";
            break;
          case 3:
            left = "left: 41%;margin-left: -13px;";
            break;
          case 4:
            left = "left: 59%;margin-left: -13px;";
            break;
          case 5:
            left = "left: 77%;margin-left: -13px;";
            break;
          case 6:
            left = "right: 1px;";
            break;
          default:
            break;
        }
        return left;
      }
    },
    getLevelDes() {
      if (this.currentEquipmentId !== "") {
        let level = "劣V";
        if (this.waterLevel == 1) {
          level = "I";
        } else if (this.waterLevel == 2) {
          level = "Ⅱ";
        } else if (this.waterLevel == 3) {
          level = "Ⅲ";
        } else if (this.waterLevel == 4) {
          level = "Ⅳ";
        } else if (this.waterLevel == 5) {
          level = "Ⅴ";
        }

        if (this.equipmentSelectType != "20") {
          //非便携式
          let equipmentData = this.collectionDatas[this.currentEquipmentId];
          let eName =
            equipmentData.customizeName && equipmentData.customizeName !== ""
              ? equipmentData.customizeName
              : equipmentData.pointName;
          if (equipmentData.datas.length > 0) {
            let rjy = 0;
            let hxxyl = 0;
            let ad = 0;
            let zd = 0;
            for (let i in equipmentData.datas[0].params) {
              let item = equipmentData.datas[0].params[i];
              if (item.paramKey == "DISSOLVEDOXYGEN") {
                rjy = item.value.toFixed(item.reserved) + item.unit;
              } else if (item.paramKey == "COD") {
                hxxyl = item.value.toFixed(item.reserved) + item.unit;
              } else if (item.paramKey == "NH3N") {
                ad = item.value.toFixed(item.reserved) + item.unit;
              } else if (item.paramKey == "nitrogen") {
                zd = item.value.toFixed(item.reserved) + item.unit;
              }
            }
            this.levelDescription =
              "水质等级评价依据：根据《地表水环境质量标准》（GB 3838-2002）相关规定，“" +
              eName +
              "”点位的“溶解氧”值为“" +
              rjy +
              "”，“化学需氧量”值为“" +
              hxxyl +
              "”，“氨氮”值为“" +
              ad +
              "”，“总氮”值为“" +
              zd +
              "”，符合“" +
              level +
              "”类水质等级判定标准。";
          } else {
            this.levelDescription = "";
          }
          this.$nextTick(() => {
            let wordSpan = $("#levelDesSpan");
            let showWidth = wordSpan.width();
            let widthSpan = this.levelDescription.length * 12;
            let style = document.styleSheets[0];
            style.insertRule(
              "@keyframes move { 0%{ left: 0;} 100%{ left: -" +
                (widthSpan - showWidth) +
                "px; }}",
              9
            );
            wordSpan.addClass("kanbanContent_levelDesSpan");
          });
        } else {
          let wordSpan = $("#levelDesSpan");
          if (wordSpan.hasClass("kanbanContent_levelDesSpan")) {
            wordSpan.removeClass("kanbanContent_levelDesSpan");
          }
          this.levelDescription = "";
        }
      }
    },
    showMoreAlarm() {
      let showLength = 10;
      if (this.alarmEquipmentList.length + 10 > this.wholeAlarmEquipmentList.length) {
        showLength = this.wholeAlarmEquipmentList.length - this.alarmEquipmentList.length;
      }
      let startIndex = this.alarmEquipmentList.length;
      for (let i = startIndex; i < startIndex + showLength; i++) {
        this.alarmEquipmentList.push(this.wholeAlarmEquipmentList[i]);
      }
    },
    mobileDataInit(param) {
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/scanTaskOne/" + param,
        method: "post",
      }).then((res) => {
        let datas = res.data.result;
        let dataList = datas.appReflectivityList;
        this.selectPointDatas = [];
        for (let i in dataList) {
          let item = {};
          item.down = parseFloat(dataList[i].paramDown);
          item.id = dataList[i].paramkey;
          item.name = dataList[i].paramname;
          item.reserved = dataList[i].reserved;
          item.time = dataList[i].saveTime;
          item.unit = dataList[i].unit;
          item.up = parseFloat(dataList[i].paramUp);
          item.value = parseFloat(dataList[i].paramvalue).toFixed(item.reserved);
          item.waterLevel = dataList[i].waterlevel;
          if (i == 0) {
            this.waterLevel = item.waterLevel;
          }
          this.selectPointDatas.push(item);
        }
        this.wavelength = res.data.result.centerWaveLength;
        this.mobileReflectivityDatas =
          res.data.result.appCollectionList.length > 0
            ? res.data.result.appCollectionList[0].reflectivity
            : [];
        // this.drawWaterSpectrumChart()
      });
    },
    drawVsCharts() {
      if (this.btnFlagParamPk) {
        let xDatas = [];
        let yDatas = [];
        let echarts = require("echarts");
        if (
          this.currentEquipmentId !== "" &&
          this.collectionDatas[this.currentEquipmentId]
        ) {
          let kanbanYDatas = [];
          let baseTitle = "";
          for (
            let i = this.collectionDatas[this.currentEquipmentId].datas.length - 1;
            i >= 0;
            i--
          ) {
            let yKValue = [];
            let labelTime = "";
            if (this.vsDataList.length > 0) {
              labelTime = this.collectionDatas[this.currentEquipmentId].datas[i].time;
            } else {
              // labelTime = utils.formatDate('hh:mm', new Date(this.collectionDatas[this.currentEquipmentId].datas[i].time))
              labelTime = utils.getStrByUnderlineAfter(
                this.collectionDatas[this.currentEquipmentId].datas[i].time,
                " "
              );
            }
            yKValue.push(labelTime);
            yKValue.push(
              parseFloat(
                this.collectionDatas[this.currentEquipmentId].datas[i].params[
                  this.vsParamKeyIndex
                ].value
              ).toFixed(
                this.collectionDatas[this.currentEquipmentId].datas[i].params[
                  this.vsParamKeyIndex
                ].reserved
              )
            );
            kanbanYDatas.push(yKValue);
            xDatas.push(labelTime);
            if (i == 0) {
              // let baseDate = new Date(this.collectionDatas[this.currentEquipmentId].datas[i].time)
              // baseTitle = utils.formatDate('MM-dd', baseDate)
              baseTitle = utils.getStrByUnderlineBefore(
                this.collectionDatas[this.currentEquipmentId].datas[i].time,
                " "
              );
            }
          }

          if (this.vsDataList.length > 0) {
            baseTitle = this.collectionDatas[this.currentEquipmentId].pointName
              ? this.collectionDatas[this.currentEquipmentId].pointName
              : this.collectionDatas[this.currentEquipmentId].equipmentName;
          }
          let jzItem = {
            color: "#00edff",
            itemStyle: {
              normal: {
                lineStyle: {
                  color: "#00edff",
                },
              },
            },
            // symbol: "none",
            name: baseTitle,
            type: "bar",
            smooth: true,
            xAxisIndex: "0",
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(0,237,255,0.3)",
                },
                {
                  offset: 1,
                  color: "rgba(0,237,255,0)",
                },
              ]),
            },
            data: kanbanYDatas,
          };
          if (kanbanYDatas.length > 1) {
            jzItem.symbol = "none";
          }
          yDatas.push(jzItem);
          if (this.vsDataList.length > 0) {
            for (let i in this.vsDataList) {
              let colorItem = this.colorJson[i % 12];
              let yDItem = [];
              for (let j = this.vsDataList[i].datas.length - 1; j >= 0; j--) {
                let orderByJson = this.getTimeOrderBy(
                  xDatas,
                  this.vsDataList[i].datas[j].time
                );
                let vsKValue = [];
                vsKValue.push(orderByJson.label);
                vsKValue.push(
                  parseFloat(
                    this.vsDataList[i].datas[j].params[this.vsParamKeyIndex].value
                  ).toFixed(
                    this.vsDataList[i].datas[j].params[this.vsParamKeyIndex].reserved
                  )
                );
                yDItem.push(vsKValue);
                if (orderByJson.index == -2) {
                  // push数据
                  xDatas.push(this.vsDataList[i].datas[j].time);
                } else if (orderByJson.index == -1) {
                  // 不添加数据
                  continue;
                } else {
                  // 添加到index位置
                  xDatas.splice(orderByJson.index, 0, this.vsDataList[i].datas[j].time);
                }
              }
              let item = {
                color: colorItem.color,
                // symbol: "none",
                name: this.vsDataList[i].pointName
                  ? this.vsDataList[i].pointName
                  : this.vsDataList[i].equipmentName,
                type: "bar",
                smooth: true,
                // xAxisIndex: parseInt(i) + 1,
                // areaStyle: {
                //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                //     offset: 0,
                //     color: colorItem.rgbColor
                //   }, {
                //     offset: 1,
                //     color: colorItem.endColor
                //   }])
                // },
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: colorItem.color,
                    },
                  },
                },
                data: yDItem,
              };
              if (yDItem.length > 1) {
                item.symbol = "none";
              }
              yDatas.push(item);
            }
          } else {
            let kanbanYVs1Datas = [];
            let title = "";
            for (
              let i = this.collectionDatas[this.currentEquipmentId].agoData.length - 1;
              i >= 0;
              i--
            ) {
              if (i < this.collectionDatas[this.currentEquipmentId].datas.length) {
                let yKValue = [];
                // yKValue.push(utils.formatDate('hh:mm', new Date(this.collectionDatas[this.currentEquipmentId].datas[i].time)))
                yKValue.push(
                  utils.getStrByUnderlineAfter(
                    this.collectionDatas[this.currentEquipmentId].datas[i].time,
                    " "
                  )
                );

                yKValue.push(
                  parseFloat(
                    this.collectionDatas[this.currentEquipmentId].agoData[i].params[
                      this.vsParamKeyIndex
                    ].value
                  ).toFixed(
                    this.collectionDatas[this.currentEquipmentId].agoData[i].params[
                      this.vsParamKeyIndex
                    ].reserved
                  )
                );
                // yKValue.push(this.collectionDatas[this.currentEquipmentId].agoData[i].params[this.vsParamKeyIndex].value)
                kanbanYVs1Datas.push(yKValue);
              }
              if (i == 0) {
                // let nDate = new Date(this.collectionDatas[this.currentEquipmentId].agoData[i].time)
                // title = utils.formatDate('MM-dd', nDate)
                title = utils.getStrByUnderlineBefore(
                  this.collectionDatas[this.currentEquipmentId].agoData[i].time,
                  " "
                );
              }
            }
            let jzItem1 = {
              color: this.colorJson[0].color,
              // symbol: "none",
              name: title,
              type: "bar",
              smooth: true,
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: this.colorJson[0].color,
                  },
                },
              },
              data: kanbanYVs1Datas,
            };
            if (kanbanYVs1Datas.length > 1) {
              jzItem1.symbol = "none";
            }
            yDatas.push(jzItem1);

            let kanbanYVs2Datas = [];
            let title2 = "";
            for (
              let i = this.collectionDatas[this.currentEquipmentId].twoAgoData.length - 1;
              i >= 0;
              i--
            ) {
              if (i < this.collectionDatas[this.currentEquipmentId].datas.length) {
                let yKValue = [];
                // yKValue.push(utils.formatDate('hh:mm', new Date(this.collectionDatas[this.currentEquipmentId].datas[i].time)))
                yKValue.push(
                  utils.getStrByUnderlineAfter(
                    this.collectionDatas[this.currentEquipmentId].datas[i].time,
                    " "
                  )
                );
                yKValue.push(
                  parseFloat(
                    this.collectionDatas[this.currentEquipmentId].twoAgoData[i].params[
                      this.vsParamKeyIndex
                    ].value
                  ).toFixed(
                    this.collectionDatas[this.currentEquipmentId].twoAgoData[i].params[
                      this.vsParamKeyIndex
                    ].reserved
                  )
                );
                // yKValue.push(this.collectionDatas[this.currentEquipmentId].twoAgoData[i].params[this.vsParamKeyIndex].value)
                kanbanYVs2Datas.push(yKValue);
              }
              if (i == 0) {
                // let nDate = new Date(this.collectionDatas[this.currentEquipmentId].twoAgoData[i].time)
                // title2 = utils.formatDate('MM-dd', nDate)
                title2 = utils.getStrByUnderlineBefore(
                  this.collectionDatas[this.currentEquipmentId].twoAgoData[i].time,
                  " "
                );
              }
            }
            let jzItem2 = {
              color: this.colorJson[1].color,
              name: title2,
              type: "bar",
              smooth: true,
              itemStyle: {
                normal: {
                  lineStyle: {
                    color: this.colorJson[1].color,
                  },
                },
              },
              data: kanbanYVs2Datas,
            };
            if (kanbanYVs2Datas.length > 1) {
              jzItem2.symbol = "none";
            }
            yDatas.push(jzItem2);
          }
        } else {
          yDatas = [];
          xDatas = [];
        }
        if (this.currentEquipmentId != "") {
          let vsDom = document.getElementById("kanbanVsParamCharts");
          if (
            vsDom.getAttribute("_echarts_instance_") &&
            vsDom.getAttribute("_echarts_instance_") !== ""
          ) {
            vsDom.removeAttribute("_echarts_instance_");
            vsDom.innerHTML = "";
          }
          this.kanbanVsParamCharts = echarts.init(vsDom);
          this.kanbanVsParamCharts.setOption({
            // color: [colorItem.color],
            tooltip: {
              trigger: "axis",
            },
            grid: {
              left: "10%",
              bottom: "8%",
              top: "5%",
              height: "78%",
              right: "5%",
              show: true,
              // backgroundColor: '#002738'
              // containLabel: true
            },
            xAxis: {
              type: "category",
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#34697C",
                },
              },
              axisLabel: {
                show: true,
                fontSize: 10,
                color: "#C0FFFF",
              },
              splitLine: {
                lineStyle: {
                  color: ["#34697C"],
                },
              },
              // boundaryGap: false,
              data: xDatas,
            },
            yAxis: {
              type: "value",
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#34697c",
                },
              },
              axisLabel: {
                show: true,
                fontSize: 10,
                textStyle: {
                  color: "#C0FFFF",
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ["#34697c"],
                },
              },
              min: function (value) {
                let res = value.min - (value.max - value.min);
                if (res < 0) {
                  res = 0;
                }
                if (value.max - value.min > 0 && value.max - value.min < 0.1) {
                  res = Math.round(parseFloat(res) * 100) / 100;
                } else if (value.max - value.min == 0) {
                  res = value.min - 1 < 0 ? 0 : value.min - 1;
                } else {
                  res = Math.round(parseFloat(res) * 10) / 10;
                }
                return res;
              },
              max: function (value) {
                let res;
                if (value.max - value.min > 0 && value.max - value.min < 0.1) {
                  res =
                    Math.round(parseFloat(value.max + (value.max - value.min)) * 100) /
                    100;
                } else if (value.max - value.min == 0) {
                  res = value.max + 1;
                } else {
                  res =
                    Math.round(parseFloat(value.max + (value.max - value.min)) * 10) / 10;
                }
                return res;
              },
              scale: true,
            },
            series: yDatas,
          });
          this.$nextTick(() => {
            this.kanbanVsParamCharts.resize();
          });
        } else {
          if (this.kanbanVsParamCharts) {
            this.kanbanVsParamCharts.clear();
          }
        }
      }
    },
    getTimeOrderBy(datas, time) {
      let nowTimes = new Date(time).getTime();
      let index = -2; // push数据
      let xAxis = time;
      for (let i = 0; i < datas.length; i++) {
        let checkDatas = new Date(datas[i]).getTime();
        if (nowTimes <= checkDatas) {
          if (checkDatas - nowTimes <= 60000) {
            index = -1; // 不添加数据
            xAxis = datas[i];
          } else {
            index = i; // 添加到index位置
          }
          break;
        }
      }
      return { index: index, label: xAxis };
    },
    moduleSwitchOperation(btn) {
      if (btn === "waterLevel") {
        this.btnFlagWaterLevel = !this.btnFlagWaterLevel;
        if (this.btnFlagWaterLevel) {
          this.$nextTick(() => {
            this.getLevelDes();
          });
        } else {
          let wordSpan = $("#levelDesSpan");
          wordSpan.removeClass("kanbanContent_levelDesSpan");
        }
      } else if (btn === "paramPk") {
        this.btnFlagParamPk = !this.btnFlagParamPk;
        if (this.btnFlagParamPk) {
          this.$nextTick(() => {
            this.drawVsCharts();
          });
        }
      } else if (btn === "params") {
        this.btnFlagActualDatas = !this.btnFlagActualDatas;
      } else if (btn === "chart") {
        this.btnFlagSpectralCurve = !this.btnFlagSpectralCurve;
        // if(this.btnFlagSpectralCurve) {
        //   this.$nextTick(() => {
        //     this.drawWaterSpectrumChart()
        //   })
        // }
      } else if (btn === "equipmentList") {
        this.btnFlagEquipmentList = !this.btnFlagEquipmentList;
        let el = $("#equipmentListArea");
        if (this.btnFlagEquipmentList) {
          el.removeClass("equMoveLeft");
          el.addClass("equMoveRight");
        } else {
          el.removeClass("equMoveRight");
          el.addClass("equMoveLeft");
        }
      }
    },
    showHistoryDataDialog() {
      let username = localStorage.getItem("username");
      let startDate = utils.formatDate("yyyy-MM-dd", this.dateBetween[0]);
      let endDate = utils.formatDate("yyyy-MM-dd", this.dateBetween[1]);
      let msgJson = {
        username: username,
        deviceSerial: [this.currentEquipmentId],
        oilCommand: {
          //命令对象
          commandId: "history", //命令id 1代表设备列表点击事件
          startDate: startDate,
          endDate: endDate,
          addedValue: "1", //命令值 1代表设备最新一次查询数据
          equipmentType: "1", // 1固定式设备 2移动设备 3无人船
        },
      };
      this.historyCardType = "10";
      this.paramHistoryDialogFlag = true;
      this.paramHistoryDialogLoading = true;
      this.dataInit(msgJson, () => {
        this.paramHistoryDialogLoading = false;
        this.paramHistoryTableHeight =
          this.$refs["kanbanWindow"].clientHeight - 38 - 55 - 74 - 60;

        this.$nextTick(() => {
          this.$refs["paramHistoryTable"].dataFormat();
        });
      });
    },
    dataInit(param, callback) {
      this.waterParamDatas = [];
      this.waterParamTimeList = [];
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "admin/dp/equipmentDetail",
        method: "post",
        data: param,
      }).then((res) => {
        let msg = res.data.result;
        let showData = {};
        if (msg.equipment_type == 1) {
          showData = msg.fixed_type_list.length > 0 ? msg.fixed_type_list[0] : {};
        } else if (msg.equipment_type == 2) {
          showData =
            msg.mobile_terminal_list.length > 0 ? msg.mobile_terminal_list[0] : {};
        } else if (msg.equipment_type == 3) {
          showData = msg.unmanned_ship_list.length > 0 ? msg.unmanned_ship_list[0] : {}; //无人船改为岸基式
        } else if (msg.equipment_type == 4) {
          showData = msg.conduit_type_list.length > 0 ? msg.conduit_type_list[0] : {}; //无人船改为岸基式
        }
        if (Object.keys(showData).length > 0) {
          if (this.currentEquipmentId === showData.equipmentId) {
            let waterParamTimeJson = {};
            this.bottomChartData = [];
            if (showData.coefficientList && showData.coefficientList.length > 0) {
              this.paramHistoryDataMaxNum = 0;
              for (let i in showData.coefficientList) {
                let coefficientItem = showData.coefficientList[i];
                let item = {};
                item.title = coefficientItem.name;
                item.type = coefficientItem.type;
                item.up = coefficientItem.up;
                item.down = coefficientItem.down;
                item.id = coefficientItem.value;
                item.reserved =
                  coefficientItem.reserved && coefficientItem.reserved !== ""
                    ? coefficientItem.reserved
                    : "0";
                item.unit = coefficientItem.unit;
                this.waterParamDatas.push(item);

                let baseItem = {};
                baseItem.name = coefficientItem.name;
                baseItem.up = coefficientItem.up;
                baseItem.down = coefficientItem.down;
                baseItem.id = coefficientItem.value;
                baseItem.reserved =
                  coefficientItem.reserved && coefficientItem.reserved !== ""
                    ? coefficientItem.reserved
                    : "0";
                baseItem.unit = coefficientItem.unit;
                for (let j in coefficientItem.array) {
                  let saveTime = coefficientItem.array[j].save_time;
                  if (waterParamTimeJson[saveTime]) {
                    let timeItem = deepClone(baseItem);
                    timeItem.value = coefficientItem.array[j].value;
                    timeItem.time = saveTime;
                    timeItem.waterLevel = coefficientItem.array[j].waterlevel;
                    timeItem.status = this.getWarnStatus(
                      timeItem.value,
                      timeItem.up,
                      timeItem.down
                    );
                    waterParamTimeJson[saveTime][baseItem.id] = timeItem;
                  } else {
                    waterParamTimeJson[saveTime] = {};
                    let timeItem = deepClone(baseItem);
                    timeItem.value = coefficientItem.array[j].value;
                    timeItem.time = saveTime;
                    timeItem.waterLevel = coefficientItem.array[j].waterlevel;
                    timeItem.status = this.getWarnStatus(
                      timeItem.value,
                      timeItem.up,
                      timeItem.down
                    );
                    waterParamTimeJson[saveTime][baseItem.id] = timeItem;
                  }
                }
                let bottomItem = {};
                bottomItem.name = coefficientItem.name;
                bottomItem.up = coefficientItem.up;
                bottomItem.down = coefficientItem.down;
                bottomItem.value = coefficientItem.value;
                bottomItem.unit = coefficientItem.unit;

                bottomItem.xData = [];
                bottomItem.yData = [];
                let bottomDataLength = coefficientItem.array.length;
                for (let k = bottomDataLength - 1; k >= 0; k--) {
                  bottomItem.xData.push(coefficientItem.array[k].save_time);
                  bottomItem.yData.push(
                    parseFloat(coefficientItem.array[k].value).toFixed(
                      coefficientItem.reserved
                    )
                  );
                }
                this.bottomChartData.push(bottomItem);
              }
              this.waterParamTimeList = utils.json2ArraySort(
                waterParamTimeJson,
                "colTime"
              );
            }

            if (this.paramHistoryDialogFlag) {
              this.$nextTick(() => {
                this.$refs["paramHistoryTable"].dataFormat(true);
              });
            }
            this.paramHistoryDataMaxNum = this.waterParamTimeList.length;
          }
        }
        if (callback && typeof callback === "function") {
          callback();
        }
      });
    },
    getWarnStatus(value, up, down) {
      let myValue = parseFloat(value);
      let upLimit = parseFloat(up);
      let dowmLimit = parseFloat(down);
      if (myValue >= dowmLimit && myValue <= upLimit) {
        return "1";
      } else {
        return "2";
      }
    },
    dateChange() {
      let username = localStorage.getItem("username");
      let startDate = utils.formatDate("yyyy-MM-dd", this.dateBetween[0]);
      let endDate = utils.formatDate("yyyy-MM-dd", this.dateBetween[1]);
      let msgJson = {
        username: username,
        deviceSerial: [this.currentEquipmentId],
        oilCommand: {
          //命令对象
          commandId: "history", //命令id 1代表设备列表点击事件
          startDate: startDate,
          endDate: endDate,
          addedValue: "1", //命令值 1代表设备最新一次查询数据
          equipmentType: "1", // 1固定式设备 2移动设备 3无人船
        },
      };
      this.dataInit(msgJson, () => {
        if (this.historyCardType == "20") {
          this.initWholeEcharts();
        }
      });
    },
    initWholeEcharts() {
      if (this.bottomChartData.length > 0) {
        let chartHeigth = "62";
        if (this.pagePermutationStatus === 2) {
          chartHeigth = "65";
        } else if (this.pagePermutationStatus === 1) {
          chartHeigth = "75";
        }
        let echarts = require("echarts");
        for (let i = 1; i <= this.bottomChartData.length; i++) {
          let chartStr = "wholeChart_" + this.bottomChartData[i - 1].value;
          let dataItem = this.bottomChartData[i - 1];
          let xLabel = dataItem.xData;
          let yDatas = dataItem.yData;
          let dom = document.getElementById(chartStr);
          if (
            dom.getAttribute("_echarts_instance_") &&
            dom.getAttribute("_echarts_instance_") !== ""
          ) {
            dom.removeAttribute("_echarts_instance_");
            dom.innerHTML = "";
          }
          this.wholeEcharts[chartStr] = null;

          let colorItem = this.colorJson[(i - 1) % 12];
          this.wholeEcharts[chartStr] = echarts.init(dom);
          this.wholeEcharts[chartStr].setOption({
            color: [colorItem.color],
            tooltip: {
              trigger: "axis",
            },
            grid: {
              left: "15%",
              bottom: "5",
              top: "35",
              height: chartHeigth + "%",
              right: "5%",
              show: true,
              borderWidth: "0",
              // backgroundColor: '#002738'
            },
            xAxis: {
              type: "category",
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#1A1639",
                },
              },
              axisLabel: {
                show: true,
                fontSize: 10,
                color: "#CCF2FF",
              },
              splitLine: {
                lineStyle: {
                  color: ["#1A1639"],
                },
              },
              boundaryGap: false,
              data: xLabel,
            },
            yAxis: {
              type: "value",
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#1A1639",
                },
              },
              axisLabel: {
                show: true,
                fontSize: 10,
                textStyle: {
                  color: "#CCF2FF",
                },
              },
              splitLine: {
                lineStyle: {
                  color: ["#1A1639"],
                },
              },
              min: function (value) {
                let res = value.min - (value.max - value.min);
                if (res < 0) {
                  res = 0;
                }
                if (value.max - value.min > 0 && value.max - value.min < 0.1) {
                  res = Math.round(parseFloat(res) * 100) / 100;
                } else if (value.max - value.min == 0) {
                  res = value.min - 1 < 0 ? 0 : value.min - 1;
                } else {
                  res = Math.round(parseFloat(res) * 10) / 10;
                }
                return res;
              },
              max: function (value) {
                let res;
                if (value.max - value.min > 0 && value.max - value.min < 0.1) {
                  res =
                    Math.round(parseFloat(value.max + (value.max - value.min)) * 100) /
                    100;
                } else if (value.max - value.min == 0) {
                  res = value.max + 1;
                } else {
                  res =
                    Math.round(parseFloat(value.max + (value.max - value.min)) * 10) / 10;
                }
                return res;
              },
              scale: true,
            },
            dataZoom: [
              {
                height: 12,
                bottom: 16,
                fillerColor: "#4E79FF", //选中范围的填充颜色。
                borderColor: "#4E79FF", //边框颜色。
                textStyle: {
                  color: "#C0FFFF",
                },
                handleStyle: {
                  color: "#C0FFFF",
                },
                startValue:
                  xLabel.length > 10
                    ? xLabel[xLabel.length - 10]
                    : xLabel.length > 0
                    ? xLabel[0]
                    : "",
                endValue: xLabel.length > 0 ? xLabel[xLabel.length - 1] : "",
              },
              {
                type: "inside",
              },
            ],
            series: [
              {
                symbol: "none",
                name: dataItem.name,
                type: "line",
                stack: "总量",
                smooth: true,
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: colorItem.rgbColor,
                    },
                    {
                      offset: 1,
                      color: colorItem.endColor,
                    },
                  ]),
                },
                data: yDatas,
              },
            ],
          });
          // this.$nextTick(() => {
          //   this.wholeEcharts[chartStr].resize()
          // })
        }
        this.$nextTick(() => {
          for (let key in this.wholeEcharts) {
            this.wholeEcharts[key].resize();
          }
        });
        let emptyList = $(".chartEmpty");
        if (emptyList.length > 0) {
          for (let i = 0; i < emptyList.length; i++) {
            let domEmpty = $(emptyList[i]);
            if (
              domEmpty.attr("_echarts_instance_") &&
              domEmpty.attr("_echarts_instance_") !== ""
            ) {
              domEmpty.removeAttr("_echarts_instance_");
              domEmpty.html("");
            }
          }
        }
      } else {
        this.wholeEcharts = {};
      }
    },
    changeCard(val) {
      if (this.historyCardType !== val) {
        this.historyCardType = val;
        if (val == "20") {
          this.$nextTick(() => {
            this.initWholeEcharts();
          });
        }
      }
    },
    getColumNum(dataLength) {
      let req = 0;
      let screenLength = 15;
      if (this.pagePermutationStatus < 5) {
        screenLength = this.pagePermutationStatus * this.pagePermutationStatus;
      }
      let mathLength = screenLength;
      if (dataLength > screenLength) {
        mathLength = dataLength;

        req = Math.ceil(mathLength / this.pagePermutationStatus);
      } else {
        req = mathLength / this.pagePermutationStatus;
      }
      return req;
    },
    changePagePermutationStatus(status) {
      if (this.pagePermutationStatus !== status) {
        this.pagePermutationStatus = status;
        this.$nextTick(() => {
          this.initWholeEcharts();
        });
      }
    },
    areaLocation(position) {
      this.map.setCenter(position);
      this.map.setZoom(12);
    },
    getHours(time) {
      let firstTime = new Date(time).getTime();
      let nowDate = new Date().getTime();
      let hours = nowDate - firstTime;
      let resHours = Math.floor(hours / (1000 * 60 * 60));
      return resHours;
    },
    isFullscreen() {
      return (
        document.fullscreenElement ||
        document.msFullscreenElement ||
        document.mozFullScreenElement ||
        document.webkitFullscreenElement ||
        false
      );
    },
    showScreen() {
      /**
       * 全屏改成浏览器中全屏
       */
      let docElm = this.$refs.kanbanWindow;
      if (docElm.requestFullscreen) {
        docElm.requestFullscreen();
      }
      // FireFox
      else if (docElm.mozRequestFullScreen) {
        docElm.mozRequestFullScreen();
      }
      // Chrome等
      else if (docElm.webkitRequestFullScreen) {
        docElm.webkitRequestFullScreen();
      }
      // IE11
      else if (docElm.msRequestFullscreen) {
        docElm.msRequestFullscreen();
      }
      docElm.style.width = "100%";
      docElm.style.height = "100%";
    },
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
      // $('#progoo_header').show()
      // $('#progoo_menu').show()
      // this.isFullFlag = false
    },
    doHeartWithWs() {
      this.ws.send("");
      this.wsHeartTimeout = setTimeout(this.doHeartWithWs, 60000);
    },
    toHome() {
      // $('#progoo_header').show()
      // $('#progoo_menu').show()
      this.$fetch({
        url: process.env.PROGOO_GATE_WATER + "menu/server",
        method: "get",
      }).then((res) => {
        if (res.data.code === 200) {
          let dataServer = {};
          for (let i in res.data.result) {
            if (res.data.result[i].key == "20") {
              dataServer = res.data.result[i];
              break;
            }
          }
          if (Object.keys(dataServer).length > 0) {
            localStorage.setItem("serviceKey", dataServer.key);
            localStorage.setItem("serviceName", dataServer.value);
            this.$router.replace({ path: "/main" });
          } else {
            this.$router.replace({ path: "/service" });
          }
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.message,
          });
        }
      });
    },
    doLogout() {
      // let json = [136,2]
      // this.ws.send(json)
      if (this.ws) {
        clearTimeout(this.wsHeartTimeout);
        this.ws.close();
        this.ws = null;
      }
      localStorage.removeItem("key");
      this.$router.push({ name: "login" });
      clearTimeout(this.nowTimeout);
    },
    exportHistoryData() {
      let header = [];
      let exData = [];
      header.push("时间");
      for (let k in this.waterParamDatas) {
        header.push(this.waterParamDatas[k].title);
      }
      for (let j in this.waterParamTimeList) {
        let itemList = [];
        itemList.push(this.waterParamTimeList[j].colTime);
        for (let i in this.waterParamDatas) {
          if (this.waterParamTimeList[j][this.waterParamDatas[i].id]) {
            itemList.push(this.waterParamTimeList[j][this.waterParamDatas[i].id].value);
          } else {
            itemList.push("");
          }
        }
        exData.push(itemList);
      }
      let title = "水质历史数据";
      this.$export_json_to_excel(header, exData, title);
    },
    chooseEquipmentFromTop(pointId, equipmentType) {
      // this.equipmentSelectType = equipmentType
      // this.currentEquipmentType = equipmentType
      //TODO
      let areaId = this.getEquipAreaCodeList(pointId);
      this.$refs.equipFixed.chooseEquipment(pointId, areaId, "");
    },
    waterLevelOrderBy() {
      if (this.wlOrderByFlag == "up") {
        this.wlOrderByFlag = "down";
      } else {
        this.wlOrderByFlag = "up";
      }
      let waterlevelList = deepClone(this.waterLevelEquipmentList);
      this.waterLevelEquipmentList = [];
      let arrLen = waterlevelList.length;
      for (let i = arrLen - 1; i >= 0; i--) {
        this.waterLevelEquipmentList.push(waterlevelList[i]);
      }
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.kanban {
  width: 100%;
  height: 100%;
  background-image: url("~@/assets/v3/kbBg.jpeg");
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
}
.kanban_map {
  width: 100%;
  height: 100%;
}
/* 标题区域CSS */
.kanban_headerBg {
  width: 100%;
  height: 11.5%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("~@/assets/v4/titleBg02.png");
  background-size: 100% 100%;
  /* background-color: rgba(0,0,0,0.3); */
}
.kanbanHearder_animLeft {
  background-image: url("~@/assets/v4/l_anim01.png");
  width: 99px;
  height: 20px;
  background-size: 100% 100%;
  position: absolute;
  right: -44px;
  bottom: -28px;
  animation: headerLeft ease-in-out 1.5s infinite;
}
.kanbanHearder_animRight {
  background-image: url("~@/assets/v4/r_anim01.png");
  width: 99px;
  height: 20px;
  background-size: 100% 100%;
  position: absolute;
  left: -20px;
  bottom: -28px;
  animation: headerRight ease-in-out 1.5s infinite;
}
@keyframes headerLeft {
  0% {
    background-image: url("~@/assets/v4/l_anim01.png");
  }
  14% {
    background-image: url("~@/assets/v4/l_anim02.png");
  }
  28% {
    background-image: url("~@/assets/v4/l_anim03.png");
  }
  42% {
    background-image: url("~@/assets/v4/l_anim04.png");
  }
  56% {
    background-image: url("~@/assets/v4/l_anim05.png");
  }
  70% {
    background-image: url("~@/assets/v4/l_anim06.png");
  }
  84% {
    background-image: url("~@/assets/v4/l_anim07.png");
  }
}
@keyframes headerRight {
  0% {
    background-image: url("~@/assets/v4/r_anim01.png");
  }
  14% {
    background-image: url("~@/assets/v4/r_anim02.png");
  }
  28% {
    background-image: url("~@/assets/v4/r_anim03.png");
  }
  42% {
    background-image: url("~@/assets/v4/r_anim04.png");
  }
  56% {
    background-image: url("~@/assets/v4/r_anim05.png");
  }
  70% {
    background-image: url("~@/assets/v4/r_anim06.png");
  }
  84% {
    background-image: url("~@/assets/v4/r_anim07.png");
  }
}
.kanbanHeader_userInfoBg {
  width: 32%;
  height: 65%;
  align-items: center;
  display: flex;
  float: left;
  box-sizing: border-box;
  padding-left: 2%;
  position: relative;
}
.kanbanHeaderUser_company {
  color: #ccf2ff;
  font-size: 18px;
  margin-left: 8px;
}
.kanbanHeader_titleBg {
  width: 36%;
  height: 100%;
  float: left;
  box-sizing: border-box;
  padding-bottom: 14px;
}
.kanbanHeader_title {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;
  position: relative;
  justify-content: center;
  align-items: center;
}
.kanbanHeader_btnGroupBg {
  width: 32%;
  height: 65%;
  align-items: center;
  display: flex;
  float: left;
  box-sizing: border-box;
  padding-right: 28px;
  position: relative;
}
.kanbanHeader_time {
  flex: 4;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 20px;
  color: #ccf2ff;
  box-sizing: border-box;
  padding-right: 24px;
}
.kanbanHeader_btnAreaForXH {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.kanbanHeader_btnAreaForXH > img {
  width: 28px;
  height: 28px;
}
.kanbanHeader_btnArea {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.kanbanHeader_btnArea > img {
  width: 28px;
  height: 28px;
}
.kanbanHeader_light {
  width: 320px;
  height: 50px;
  top: 100%;
  left: 50%;
  position: absolute;
  margin-left: -160px;
  border-radius: 50% / 50%;
  box-shadow: 0 0 5px rgb(178, 242, 255, 0.8);
  animation: light ease-in-out 3s infinite;
}
@keyframes light {
  0% {
    box-shadow: 0 0 5px rgb(178, 242, 255, 0.8);
  }
  50% {
    box-shadow: 0 0 25px rgb(178, 242, 255, 0.8);
  }
  100% {
    box-shadow: 0 0 5px rgb(178, 242, 255, 0.8);
  }
}
.kanban_equipmentBg {
  width: 20%;
  box-sizing: border-box;
  padding: 0 18px;
  height: 90%;
  position: absolute;
  top: 10%;
  left: 0;
  z-index: 10;
}
.kanbanEquipment_content {
  width: 100%;
  height: 89%;
  float: left;
  background: rgba(2, 14, 61, 0.6);
}
.kanbanEquipmentContent_bg {
  width: 100%;
  height: calc(100% - 48px);
  float: left;
}
.kanbanEquipment_statusBg {
  width: 100%;
  height: 12%;
  float: left;
  display: flex;
  padding: 6px 0;
  box-sizing: border-box;
}
.kanbanEquipment_statusItem {
  flex: 1;
  height: 100%;
}
.kanbanEquipmentStatusItem_numBg {
  height: 64%;
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.kanbanEquipmentStatusItem_textBg {
  height: 36%;
  float: left;
  width: 100%;
  display: flex;
  justify-content: center;
}
.kanbanEquipmentStatusItem_num {
  font-size: 28px;
}
.kanbanEquipmentStatusItem_sign {
  width: 8px;
  height: 8px;
  border-radius: 8px;
  margin: 8% 6px 0 0;
}
.kanbanEquipmentStatusItem_text {
  color: #ccf2ff;
  font-size: 14px;
}
.kanbanEquipment_listBg {
  width: 100%;
  height: 88%;
  float: left;
}
.kanbanEquipment_btnArea {
  width: 100%;
  height: 11%;
  float: left;
  box-sizing: border-box;
  padding-bottom: 16px;
}
.kanbanEquipment_btnItem {
  height: 100%;
  width: 33%;
  float: left;
  box-sizing: border-box;
  padding: 0 6.5%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.kanbanEquipment_btn {
  width: 100%;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(80, 228, 255, 0.2);
}
.kanban_moduleTitle {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  background-image: url("~@/assets/v4/titleSignBg.png");
  background-size: 100% 100%;
  /* background-image: linear-gradient(to right, rgba(39, 95, 127, 1) , rgba(39, 95, 127, 0)); */
}
.kanbanEquipment_switchArea {
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -48px;
}
.kanbanEquipment_switchArea_right {
  width: 48px;
  height: 48px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: -66px;
}
.kanbanEquipment_switchArea > i {
  font-size: 20px;
  font-weight: bold;
}
.kanbanEquipment_switchArea_right > i {
  font-size: 20px;
  font-weight: bold;
}
.kanbanModuleTitle_sign {
  width: 6px;
  height: 32px;
}
.kanbanModuleTitle_text {
  flex: 1;
  color: #d0f5ff;
  font-size: 24px;
  box-sizing: border-box;
  padding: 0 14px;
}
.kanbanModuleTitle_tds {
  flex: 1;
  box-sizing: border-box;
  padding-right: 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.kanbanModuleTitle_tdsText {
  color: #d0f5ff;
  font-size: 12px;
}
.kanban_equipmentActual {
  width: 20%;
  box-sizing: border-box;
  padding-right: 28px;
  height: 58%;
  position: absolute;
  top: 10%;
  right: 0;
}
.kanban_paramActualTime_backCover {
  width: 20%;
  box-sizing: border-box;
  padding-right: 28px;
  height: 90%;
  position: absolute;
  top: 10%;
  right: 0;
  z-index: 100;
  background: linear-gradient(90deg, #409eff, #40c7ff);
}
.kanban_paramActualTime {
  width: 20%;
  box-sizing: border-box;
  padding-right: 28px;
  height: 90%;
  position: absolute;
  top: 10%;
  right: 0;
  z-index: 101;
}
.kanbanParamActualTime_content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.kanbanParamActualTime_bg {
  width: 100%;
  flex: 1;
  box-sizing: border-box;
  padding: 18px 0 28px;
  overflow: hidden;
}
.kanbanParamActualTime_list {
  width: 100%;
  height: 100%;
  /* background: rgba(0,0,0,0.3); */
  background: rgba(2, 14, 61, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-sizing: border-box;
  position: relative;
}
.kanbanParamActualTimeList_titleArea {
  width: 100%;
  height: 40px;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  background: rgba(27, 22, 57, 0.9);
}
.kanbanParamActualTimeListTitle_index {
  flex: 0.8;
  height: 100%;
}
.kanbanParamActualTimeListTitle_item {
  flex: 2;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
  color: #ccf2ff;
}
.kanbanParamActualTimeListTitle_wqTopTen {
  flex: 1.3;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 16px;
  justify-content: center;
  font-weight: bold;
  color: #ccf2ff;
}
.kanbanParamActualTimeListTitle_orderBy {
  width: 25px;
  height: 25px;
  cursor: pointer;
}
.kanbanParamActualTimeListTitle_wqTopItem {
  flex: 2.4;
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 16px;
  justify-content: center;
  font-weight: bold;
  color: #ccf2ff;
}
.kanbanParamActualTimeList_contentArea {
  width: 100%;
  height: 100%;
  padding: 40px 0;
  box-sizing: border-box;
}
.kanbanEquipmentAlarmList_contentArea {
  width: 100%;
  height: 100%;
  padding-top: 40px;
  box-sizing: border-box;
}
.kanbanParamActualTimeList_contentBg {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}
.kanbanParamActualTimeList_contentBg::-webkit-scrollbar {
  width: 2px;
  background: #020e3d;
}
.kanbanParamActualTimeList_contentBg::-webkit-scrollbar-thumb {
  border-radius: 3px;
  height: 100px;
  background-color: #0095ff;
}
.emptyStatus {
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-size: 13px;
  color: #ccf2ff;
  text-align: center;
}
.kanbanParamActualTimeListItem_status {
  flex: 0.8;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kanbanParamActualTimeListItem_sign {
  width: 20px;
  height: 12px;
  border-radius: 3px;
}
.kanbanParamActualTimeListItem_paramName {
  flex: 2;
  color: #ccf2ff;
  line-height: 39px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.kanbanParamActualTimeListItem_paramNameOthers {
  flex: 2;
  color: #f5f5cb;
  line-height: 39px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.kanbanParamActualTimeListItem_paramValue {
  flex: 2;
  color: #ccf2ff;
  position: relative;
  line-height: 39px;
}
.kanbanParamActualTimeListItem_thresholdAlarm {
  position: absolute;
  left: -24px;
  width: 16px;
  height: 16px;
  top: 12px;
}
.kanbanParamActualTimeListItem_threshold {
  flex: 2;
  color: #ccf2ff;
  line-height: 39px;
  white-space: nowrap;
  position: relative;
}
.kanbanParamActualTime_history {
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #ccf2ff;
  cursor: pointer;
  box-sizing: border-box;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.kanbanParamActualTime_historyText {
  padding: 0 5px;
}
.kanbanParamActualTime_history > i {
  margin-top: 2px;
}
.kanbanEquipmentAlarmList_item {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  font-size: 14px;
  /* background: rgba(0, 237, 255, 0.1); */
}
.kanbanEquipmentAlarmList_topBg {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 14px;
}
.kanbanEquipmentAlarmList_index {
  flex: 1;
  line-height: 39px;
  text-align: center;
  color: #ccf2ff;
}
.kanbanEquipmentAlarmList_equipment {
  flex: 2;
  line-height: 39px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.kanbanEquipmentAlarmList_top {
  width: 26%;
  height: 100%;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.kanbanEquipmentAlarmList_topSign {
  width: 50px;
  height: 23px;
  font-size: 13px;
  border-radius: 5px;
  line-height: 23px;
  text-align: center;
  font-weight: bold;
  position: relative;
}
.kanbanEquipmentAlarmList_topThree {
  width: 21px;
  height: 21px;
  position: absolute;
  top: -10px;
  left: -8px;
}
.kanbanEquipmentAlarmList_topEquipment {
  width: 48%;
  height: 100%;
  float: left;
  color: #ccf2ff;
  display: flex;
  align-items: center;
}
.kanbanEquipmentAlarmList_topEquipmentBg {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.kanbanEquipmentAlarmList_topEquipmentText {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: calc(100% - 30px);
  float: left;
  height: 100%;
  line-height: 39px;
  box-sizing: border-box;
  padding-left: 4px;
}
.kanbanEquipmentAlarmList_topWaterLevelBg {
  width: 26%;
  height: 100%;
  float: left;
  color: #ccf2ff;
  justify-content: center;
  display: flex;
  align-items: center;
}
.kanbanEquipmentAlarmList_topWaterLevel {
  padding: 0 10px;
  height: 23px;
  color: black;
  border-radius: 5px;
  line-height: 23px;
}
.kanbanEquipmentAlarmList_equipmentType {
  width: 30px;
  height: 30px;
  float: left;
  margin-top: 4px;
}
.kanbanEquipmentAlarmList_equipmentText {
  height: 24px;
  line-height: 24px;
  padding: 0 5px;
  border-radius: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 3px;
  color: #ccf2ff;
}
.kanbanEquipmentAlarmList_type {
  flex: 2;
  line-height: 39px;
  color: #ccf2ff;
}
.kanbanEquipmentAlarmList_time {
  flex: 2;
  line-height: 39px;
  color: #ccf2ff;
}
.kanbanEquipmentAlarmList_more {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  color: #ccf2ff;
  cursor: pointer;
}
.kanbanEquipmentAlarmList_moreText {
  padding: 0 5px;
}
.kanban_spectralCurve {
  width: 20%;
  height: 32%;
  box-sizing: border-box;
  padding-right: 28px;
  position: absolute;
  top: 68%;
  right: 0;
}
.kanbanSpectralCurve_content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.kanbanSpectralCurve_bg {
  width: 100%;
  flex: 1;
  box-sizing: border-box;
  padding: 18px 0 26px;
}
.kanbanSpectralCurve_chartBg {
  width: 100%;
  height: 100%;
  /* background: rgba(0,0,0,0.3); */
  background: rgba(2, 14, 61, 0.4);
  /* opacity: 0.4; */
}
.kanbanSpectralCurve_chart {
  width: 100%;
  height: 100%;
}
.kanban_waterLevel {
  width: 56%;
  position: absolute;
  height: 18%;
  top: 11.5%;
  left: 21%;
  box-sizing: border-box;
  padding-top: 1.4%;
}
.kanbanWaterLevel_hint {
  width: 52%;
  height: 20%;
  float: left;
  position: relative;
  color: #00edff;
  font-size: 13px;
  overflow: hidden;
}
.kanbanContent_levelDesSpan {
  white-space: nowrap;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  -webkit-animation: move 15s linear infinite;
  animation: move 15s linear infinite;
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}
/* @keyframes move {
  0%{ left: 0; }
  100%{ left: -100%; }
} */
.kanbanWaterLevel_bg {
  width: 52%;
  height: 80%;
  float: left;
}
.kanbanWaterLevel_textBg {
  width: 48%;
  height: 80%;
  float: left;
  display: flex;
  align-items: center;
}
.kanbanWaterLevelText_item {
  flex: 1;
  height: 100%;
}
.kanbanWaterLevelTextItem_numArea {
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.kanbanWaterLevelTextItem_numBg {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: baseline;
}
.kanbanWaterLevelTextItem_num {
  font-size: 44px;
  color: #68b2dc;
  padding: 0 10px;
}
.kanbanWaterLevelTextItem_unit {
  font-size: 22px;
  color: #c3f3ff;
}
.kanbanWaterLevelTextItem_title {
  width: 100%;
  height: 20%;
  color: #ccf2ff;
  font-size: 16px;
  box-sizing: border-box;
  padding-left: 18%;
}
.kanbanWaterLevelText_cut {
  width: 2px;
  height: 40px;
  background: linear-gradient(
    360deg,
    rgba(0, 237, 255, 0) 0%,
    #00edff 51%,
    rgba(0, 237, 255, 0) 100%
  );
}
.kanbanContentWaterLevel_picBg {
  width: 100%;
  height: 26%;
  margin-top: 2%;
  float: left;
  display: flex;
  align-items: flex-end;
  position: relative;
}
.kanbanContentWaterLevel_pic {
  width: 100%;
  height: 17px;
  box-sizing: border-box;
  background: linear-gradient(
    90deg,
    rgba(0, 237, 255, 0.6) 0%,
    #0095ff 49%,
    rgba(152, 16, 73, 0.53) 100%
  );
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.7);
}
.kanbanContentWaterLevel_sign {
  width: 24px;
  height: 32px;
  position: absolute;
  top: 0;
}
.kanbanContentWaterLevel_sign02 {
  width: 84px;
  height: 97px;
  position: absolute;
  top: 0;
}
.kanbanContentWaterLevel_textBg {
  width: 100%;
  float: left;
  margin-top: 8px;
}
.kanbanConentWaterLevel_textItemLeft {
  width: 14%;
  float: left;
  font-size: 14px;
  color: #ccf2ff;
}
.kanbanConentWaterLevel_textItemCenter {
  width: 18%;
  float: left;
  font-size: 14px;
  color: #ccf2ff;
  text-align: center;
}
.kanbanConentWaterLevel_textItemRight {
  width: 14%;
  float: left;
  font-size: 14px;
  color: #ccf2ff;
  text-align: right;
}
.kanban_vs {
  width: 56%;
  position: absolute;
  height: 32%;
  bottom: 0;
  left: 21%;
}
.kanbanVs_content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.kanbanVs_area {
  width: 100%;
  flex: 1;
  box-sizing: border-box;
  padding: 6px 0 26px;
}
.kanbanVs_areaBg {
  width: 100%;
  height: 100%;
  /* background: rgba(0,0,0,0.3); */
}
.kanbanVs_paramChoiseArea {
  width: 100%;
  height: 46px;
  box-sizing: border-box;
  padding: 10px 12px 10px 0;
  background: rgba(8, 14, 61, 0.6);
}
.kanbanVsParamChoise_arrow {
  width: 38px;
  height: 100%;
  float: left;
}
.kanbanVsParamChoise_arrowIcon {
  color: white;
  font-size: 12px;
}
.kanbanVsParamChoise_arrowLeft {
  cursor: pointer;
  width: 16px;
  height: 100%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.kanbanVsParamChoise_arrowLeft:hover {
  background: rgba(0, 149, 255, 0.5);
}
.kanbanVsParamChoise_arrowRight {
  cursor: pointer;
  width: 16px;
  height: 100%;
  float: right;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.kanbanVsParamChoise_arrowRight:hover {
  background: rgba(0, 149, 255, 0.5);
}
.kanbanVsParamChoise_bg {
  width: calc(100% - 76px);
  height: 100%;
  float: left;
  overflow-x: scroll;
  overflow-y: hidden;
  -ms-overflow-style: none;
  overflow: -moz-scrollbars-none;
}
.kanbanVsParamChoise_bg::-webkit-scrollbar {
  height: 0 !important;
}
.kanbanVsParamChoise_paramArea {
  height: 100%;
  white-space: nowrap;
}
.kanbanVsParamChoise_parmamItem {
  cursor: pointer;
  margin: 0 4px;
  display: inline-block;
  padding: 0 10px;
  height: 100%;
  font-size: 14px;
  line-height: 26px;
  background: rgba(255, 255, 255, 0.1);
}
.kanbanVsParamChoise_parmamItem_o {
  margin: 0 4px;
  display: inline-block;
  padding: 0 10px;
  height: 100%;
  font-size: 14px;
  line-height: 26px;
  background: rgba(0, 149, 255, 0.5);
}
.kanbanVsParamChoise_parmamItem:hover {
  background: rgba(0, 149, 255, 0.5);
}
.kanbanVs_paramDataArea {
  width: 100%;
  height: calc(100% - 46px);
}
.kanbanVsParamData_datasBg {
  width: 56%;
  height: 100%;
  float: left;
  box-sizing: border-box;
  padding-right: 1.8%;
  display: flex;
}
.kanbanVsParamData_chartsBg {
  width: 44%;
  height: 100%;
  float: left;
  background: rgba(8, 14, 61, 0.6);
}
.kanbanVsParamData_charts {
  width: 100%;
  height: 100%;
  float: left;
}
.kanbanVsParamData_benchmarkItemBg {
  flex: 1;
  height: 100%;
}
.kanbanVsParamData_benchmarkTitle {
  width: 100%;
  height: 24px;
  display: flex;
  align-items: center;
}
.kanbanVsParamDataBenchmark_titleSign {
  width: 16px;
  height: 8px;
  border-radius: 8px;
  background: #00edff;
}
.kanbanVsParamDataBenchmark_titleEquipment {
  flex: 1;
  font-size: 12px;
  color: #ccf2ff;
  box-sizing: border-box;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kanbanVsParamDataBenchmark_titleSignText {
  font-size: 12px;
  color: #00edff;
  padding-right: 10px;
}
.kanbanVsParamData_benchmarkItem {
  width: 100%;
  height: calc(100% - 24px);
  display: flex;
  flex-direction: column;
  background-image: linear-gradient(
    to right,
    rgba(24, 45, 76, 0.9),
    rgba(8, 14, 61, 0.6)
  );
}
.kanbanVsParamDataListItem_bg {
  width: 100%;
  flex: 1;
  box-sizing: border-box;
  padding: 0 8px;
  position: relative;
  max-height: 17%;
}
.kanbanVsParamDataListItem_value {
  font-size: 12px;
  width: 40%;
  height: 100%;
  display: flex;
  color: #c3f3ff;
  align-items: center;
  float: left;
}
.kanbanVsParamDataListItem_vsImg {
  position: absolute;
  width: 8px;
  height: 10px;
  left: 40%;
  top: 50%;
  margin-top: -5px;
  margin-left: -4px;
}
.kanbanVsParamDataListItem_time {
  font-size: 12px;
  width: 60%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  float: left;
  height: 100%;
  color: #7594a9;
}
.kanbanVsParamData_vsArea {
  height: 100%;
  position: relative;
  overflow: hidden;
}
.kanbanVsParamData_vsItemBg {
  /* width: 50%; */
  position: absolute;
  height: 100%;
  box-sizing: border-box;
  padding-left: 5px;
  transition: -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
  transition: transform 0.4s ease-in-out, -webkit-transform 0.4s ease-in-out;
}
.kanbanVsParamData_vsItem {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: calc(100% - 24px);
  background: rgba(8, 14, 61, 0.4);
}
.kanbanVsParamData_vsTitle {
  width: 100%;
  height: 24px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.kanbanVsParamDataVs_titleSign {
  width: 16px;
  height: 8px;
  border-radius: 8px;
  background: #cba93d;
}
.kanbanVsParamDataVs_titleEquipment {
  flex: 1;
  font-size: 12px;
  color: #ccf2ff;
  box-sizing: border-box;
  padding: 0 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kanbanVsParamDataVs_titleSignText {
  font-size: 12px;
  color: #00edff;
  padding-right: 10px;
}
.kanbanVsParamData_arrow {
  width: 24px;
  height: 24px;
  border-radius: 24px;
  position: absolute;
  top: 50%;
  margin-top: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: rgba(24, 45, 76, 0.4);
}
.kanbanVsParamData_arrow > i {
  font-size: 13px;
  color: #00edff;
}
.kanbanVsParamDataArrowLeft {
  left: 8px;
}
.kanbanVsParamDataArrowRight {
  right: 3px;
}
.kanbanVsParamData_arrow:hover {
  background: rgba(24, 45, 76, 0.9);
}
/* *
 * 设备列表-搜索弹框
 */
.metaEquipmentListSearch_pop {
  box-sizing: border-box !important;
  border: 1px solid #2383c9 !important;
  border-radius: 5px !important;
  box-shadow: inset 0 0 40px #003d83 !important;
  background-color: #16263d !important;
}
.metaEquipmentListSearch_pop .el-select-dropdown__item {
  color: white !important;
}
.metaEquipmentListSearch_pop .el-select-dropdown__item.selected {
  color: #409eff !important;
}
.metaEquipmentListSearch_pop .el-select-dropdown__item.hover,
.metaEquipmentListSearch_pop .el-select-dropdown__item:hover {
  background: unset !important;
  color: #409eff !important;
}
.metaEquipmentListSearch_select .el-input {
  height: 100% !important;
}
.metaEquipmentListSearch_select .el-input__inner {
  height: 100% !important;
  padding: 0;
  padding-left: 10px;
  line-height: 35px !important;
  background: rgba(18, 13, 58, 0.3);
  color: white;
  border: none;
  border-radius: 0;
}
.metaEquipmentListSearch_select .el-input__suffix {
  right: 0;
}
.metaEquipmentListSearch_input .el-input__inner {
  height: 100% !important;
  background: rgba(18, 13, 58, 0.3);
  color: white;
  border: none;
  border-radius: 0;
  padding: 0;
}
/* *
 * 设备列表-设备类型选择
 */
.metaEquipmentListType_select .el-input {
  height: 100% !important;
}
.metaEquipmentListType_select .el-input__inner {
  height: 100% !important;
  padding: 0;
  padding-left: 10px;
  line-height: 35px !important;
  background: rgba(18, 13, 58, 0.3);
  box-sizing: border-box;
  border: 1px solid #a5c0d2;
  color: white;
  border-radius: 35px;
}
.metaEquipmentListType_select .el-input__suffix {
  right: 0;
}
/* window info */
.equInfoWin {
  width: 180px;
  height: 146px;
  background-size: 100% 100%;
  background-image: url("~@/assets/v4/windowInfoBg.png");
  box-sizing: border-box;
  padding: 6px 4px 3px 10px;
  float: left;
}
.equInfoWin_bg {
  width: 100%;
  height: 100%;
  float: left;
}
.equInfoWin_header {
  width: 100%;
  height: 28px;
  line-height: 28px;
  font-size: 13px;
  float: left;
}
.equInfoWin_contentBg {
  width: 100%;
  height: 109px;
  overflow-y: scroll;
  float: left;
}
.equInfoWin_contentBg::-webkit-scrollbar {
  width: 2px;
  background: #020e3d;
}
.equInfoWin_contentBg::-webkit-scrollbar-thumb {
  border-radius: 3px;
  height: 100px;
  background-color: #0095ff;
}
.equInfoWinContent_itemBg {
  width: 100%;
  float: left;
  padding-bottom: 4px;
}
.equInfoWinContentItem_title {
  width: 42%;
  float: left;
  font-size: 12px;
  color: #ccf2ff;
}
.equInfoWinContentItem_info {
  width: 58%;
  float: left;
  font-size: 12px;
  color: #fff;
  word-break: break-all;
}
/* 设备信息弹出框 */
.szEquipInfo_bg {
  padding-left: 10px;
  width: 350px;
  height: 222px;
  float: left;
  background: rgba(2, 14, 61, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.szEquipInfo_title {
  width: 100%;
  line-height: 48px;
  height: 48px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  float: left;
  box-sizing: border-box;
  padding-right: 10px;
}
.szEquipInfoTitle_sign {
  width: 4px;
  background: #00fffc;
  height: 18px;
  float: left;
  margin: 18px 6px 0 12px;
}
.szEquipInfoTitle_text {
  float: left;
  height: 100%;
  text-align: left;
  box-sizing: border-box;
  padding-top: 3px;
}
.szEquipInfo_infoArea {
  width: 100%;
  float: left;
  height: 170px;
  box-sizing: border-box;
  padding: 0 10px 0 10px;
}
.szEquipInfo_infoAreaScrollBg {
  width: 100%;
  float: left;
  height: 100%;
  padding-right: 10px;
  box-sizing: border-box;
  overflow-y: scroll;
}
.szEquipInfo_infoAreaScrollBg::-webkit-scrollbar {
  width: 2px;
  background: #020e3d;
}
.szEquipInfo_infoAreaScrollBg::-webkit-scrollbar-thumb {
  border-radius: 3px;
  height: 100px;
  background-color: #0095ff;
}
.szPointList_infoArea {
  width: 100%;
  float: left;
  height: 158px;
  box-sizing: border-box;
  padding: 0 12px 0 4px;
}
.szPointList_infoAreaBg {
  width: 100%;
  height: 100%;
  float: left;
  overflow-y: scroll;
}
.szPointList_infoAreaBg::-webkit-scrollbar {
  width: 2px;
  background: #020e3d;
}
.szPointList_infoAreaBg::-webkit-scrollbar-thumb {
  border-radius: 3px;
  height: 100px;
  background-color: #0095ff;
}
.szPointList_pointItem {
  width: 100%;
  box-sizing: border-box;
  color: #ccf2ff;
  font-size: 13px;
  padding: 5px 10px 5px 0;
  float: left;
  display: flex;
  cursor: pointer;
}
.szPointList_pointItem_o {
  width: 100%;
  box-sizing: border-box;
  color: #0efcff;
  font-size: 13px;
  padding: 5px 10px 5px 0;
  float: left;
  display: flex;
}
.szPointList_pointItemIcon {
  width: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.szPointList_pointItemText {
  flex: 1;
}
/* *
 * 历史数据 & 光谱曲线 弹出框
 */
.wholeChartPanel_dialog {
  width: 100%;
  height: 100%;
  background: unset !important;
}
.wholeChartPanel_dialog .el-dialog__header {
  padding: 0;
}
.wholeChartPanel_dialog .el-dialog__body {
  height: 100%;
  padding: 0 !important;
}
.wholeChartPanelDialog_bg {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 36px 18px;
}
.wholeChartPanelDialog_contentBg {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-image: url("~@/assets/pop/popDialogBg.png");
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 15px 40px 40px;
}
.wholeChartPanelDialog_titleBar {
  width: 100%;
  height: 74px;
  float: left;
  position: relative;
}
.wholeChartPanelDialog_title {
  font-size: 20px;
  color: #ccf2ff;
  margin-right: 50px;
}
.wholeChartPanelDialog_titleSign {
  font-size: 20px;
  color: #ccf2ff;
  margin-right: 12px;
}
.wholeChartPanelDialog_titleLeft {
  width: 35%;
  height: 100%;
  float: left;
  display: flex;
  align-items: center;
}
.wholeChartPanelDialog_titleCenter {
  width: 30%;
  height: 100%;
  float: left;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wholeChartPanelDialog_card {
  width: 152px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #ccf2ff;
  font-size: 13px;
  background-color: rgba(30, 24, 58, 0.8);
  cursor: pointer;
}
.wholeChartPanelDialog_card_o {
  width: 152px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #ccf2ff;
  font-size: 13px;
  background-color: rgba(42, 57, 143, 0.8);
}
.wholeChartPanelDialog_titleRight {
  height: 35%;
  float: right;
}
.wholeChartPanelDialog_closeBtn {
  width: 40px;
  height: 74px;
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wholeChartPanelDialog_closeBtn > img {
  width: 23px;
  height: 23px;
  cursor: pointer;
  margin-top: -20px;
}
.wholeChartPanel_searchArea {
  width: 100%;
  height: 60px;
}
.wholeChartPanel_screenChooseArea {
  float: right;
  width: 40%;
  height: 40px;
  display: flex;
  justify-content: center;
}
.wholeChartPanelDialog_titleItemBg {
  width: 48px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wholeChartPanelDialog_titleItemBg > img {
  width: 22px;
  height: 22px;
}
.wholeChartPanelSearch_datePicker {
  float: right;
  width: 30%;
  padding-right: 20px;
  box-sizing: border-box;
  text-align: right;
  height: 40px;
}
.wholeChartPanelDialog_chartPanelBg {
  flex: 1;
  width: 100%;
  height: 100%;
  padding-right: 5px;
  box-sizing: border-box;
  overflow-y: scroll;
}
.wholeChartPanelDialog_chartPanelBg::-webkit-scrollbar {
  width: 2px;
  background: #020e3d;
}
.wholeChartPanelDialog_chartPanelBg::-webkit-scrollbar-thumb {
  border-radius: 3px;
  height: 100px;
  background-color: #0095ff;
}
.historyCard_exportBtn {
  position: absolute;
  left: 50%;
  margin-left: -84px;
  bottom: 32px;
  width: 157px;
  height: 28px;
  line-height: 28px;
  background-image: url("~@/assets/v3/dataExportBtn.png");
  background-size: 100% 100%;
  color: #ccf2ff;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
}
.wholeChartPanelDialog_chartPanelItemBg {
  width: 100%;
  display: flex;
  box-sizing: border-box;
  padding: 5px 5px 8px;
}
.wholeChartPanelDialogChartPanelItemArea {
  box-sizing: border-box;
  padding: 0 5px;
}
.wholeChartPanelDialogChartPanelItem_bg {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}
.wholeChartPanelDialogChartPanelItem_chart {
  width: 100%;
  height: 100%;
}
.wholeChartPanelDialogChartPanelItem_paramName {
  width: 100%;
  height: 28px;
  line-height: 28px;
  position: absolute;
  top: 0;
  color: #ccf2ff;
  text-align: center;
  font-size: 13px;
}
.popDatePicker {
  height: 100% !important;
  background-color: unset !important;
  border: 1px solid #ccf2ff !important;
  box-sizing: border-box !important;
  border-radius: 40px !important;
}
.popDatePicker .el-range-input,
.popDatePicker .el-range-separator {
  background-color: unset !important;
  color: #ccf2ff !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
}
/* Color */
.color_text_red {
  color: #fa2f2d;
}
.color_text_blue {
  color: #00edff;
}
.color_text_yellow {
  color: #ffda21;
}
.color_text_orange {
  color: #ff8f17;
}
.color_vsText_red {
  color: #d1514d;
}
.color_vsText_orange {
  color: #bc9e62;
}
.color_bg_orange {
  background-color: #ff8f17;
}
.color_bg_yellow {
  background-color: #ffda21;
}
.color_bg_red {
  background-color: #fa2f2d;
}
.color_bg_blue {
  background-color: #00edff;
}
.color_shadow_orange {
  box-shadow: 0 0 8px #ff8f17;
}
.color_shadow_yellow {
  box-shadow: 0 0 8px #ffda21;
}
.color_shadow_red {
  box-shadow: 0 0 8px #fa2f2d;
}
.color_shadow_blue {
  box-shadow: 0 0 8px #00edff;
}
/* animation */
.equMoveLeft {
  animation: equToLeft 0.5s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  -webkit-animation: equToLeft 0.5s; /* Safari and Chrome */
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-fill-mode: forwards;
}
.equMoveRight {
  animation: equToRight 0.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  -webkit-animation: equToRight 0.5s; /* Safari and Chrome */
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: forwards;
}
@keyframes equToLeft {
  0% {
    left: 0;
  }
  100% {
    left: -20%;
  }
}
@keyframes equToRight {
  0% {
    left: -20%;
  }
  100% {
    left: 0;
  }
}
/* @font-face{
  font-family: 'lmzr';
  src: url('~@/assets/font/lmzr.ttf');
  font-weight: normal;
  font-style: normal;
} */
</style>
